Outer and Inner Spacing on your NimbusRX Website Editor

Outer and Inner Spacing on your NimbusRX Website Editor

Outer spacing and inner spacing are the space around an element. Outer spacing is also know as margin, and is the space outside of the element's borders. Inner spacing is also known as padding, and is the space inside these borders. When you adjust the outer spacing and inner spacing of an element, you change its placement and appearance. This can make your site look more customized and professional.

To adjust the outer and inner spacing around an element:

  1. To access the design editor, right-click the element, and click Edit Design. Or if you are in flex mode or Editor 2.0, select Edit Design from the floating menu to open the design panel. Click the element to open the floating menu, then click the option to edit design.

  2. Click Spacing .

  3. To change the outer spacing (margin), click and edit the numbers in the outer box. You can also click on one of these numbers and use the slider to adjust the size.

    outer_spacing.png

  4. To change the inner spacing (padding), click and edit the numbers in the inner box. You can also click on one of these numbers and use the slider to adjust the size.

    inner_spacing.png

  5. If you are using Editor 2.0: Click in the respective boxes to edit the margin and padding values. The horizontal margin and padding values are linked. If you change one, the other will automatically update. They can be unlinked by clicking the link icon.

    linked-spacing.png

Note

If you see odd spaces that you cannot remove, be sure to check all parts of the widget, including the column in which it is located.

Flex Mode and Editor 2.0 Size Unit Options

In flex mode and Editor 2.0, there are additional measurement options:

  • px (pixels). Provides a fixed unit of measurement unaffected by device size variations.

  • % (percentage). A versatile unit that scales elements proportionally based on the size of their container.

  • vh (viewport height). Dynamically scales elements in relation to the screen's height (viewport).

  • vw (viewport width). Dynamically adjusts elements based on the screen's width (viewport), ensuring proportional scaling across different devices.

Note

For detailed information, see Size Units.

To change the size unit:

  1. Open the design panel of an element.

  2. Navigate to the Spacing section.

  3. Click into one of the boxes.

  4. Click the current size unit.

  5. Click the desired size unit.

flex-padding-margin-size-units.png

    • Related Articles

    • NimbusRX Website Editor Overview

      This article covers the areas of the editor and how add and configure sections, rows, columns, inner rows, and widget alignment. Editor Interface Overview The editor can be divided into several areas. In the editor there are several predefined ...

    • NimbusRX Website Editor Widgets

      Widgets: Library and Overview Widgets are the key building blocks of a site, allowing you to add and manage content effectively. They serve as essential elements that enhance both the functionality and design of your website. By incorporating various ...

    • Launching Your NimbusRX Website Editor Site Checklist

      Launching Your Site Checklist Building a site is a project. A project where you are often working with a designer, content writer, and developer all at the same time. It is no easy task to juggle the spacing you wanted to adjust, the logo you need to ...

    • 🚀 NimbusRX Self-Launch Checklist

      ? NimbusRX Self-Launch Checklist Getting Ready to Go Live with Your Telehealth Platform Before accepting your first live patient, there are a few essential steps you need to complete. While the NimbusRX engineering and support teams handle initial ...

    • 🔁 How to Replace an Image on Your Website

      ? How to Replace an Image on Your Website If you're using the NimbusRX Website Builder and need to update or replace an image on your site, follow these simple steps: ✅ Step-by-Step Instructions: Log in to your NimbusRX Website Builder account. ...