> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.blab.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Outer and Inner Spacing

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.
2. Click **Spacing**.
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.

[![](https://storage.crisp.chat/users/helpdesk/website/-/7/7/9/7/7797dd667d47e00/a8a8b750-1bc7-49cb-9029-a7aafa_1yf9f8n.png)](https://downloads.intercomcdn.com/i/o/h5estzhi/1319593182/8163ab0fd02e6904b715f35df36b/28929371175959?expires=1767713400&signature=609ebbb89e74784af880c36e94f68aa4c6229459463bd2126072fbd961f9a9ed&req=dSMmH8x3noBXW%2FMW1HO4zQbHRsePI2XO%2FucUuA2OJVFjUOb4LwjAmbBQPvl2%0AOsGH%0A)

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.

[![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/e/9/e4e94fb3f9da2000/8f9f31bb-8f1c-4113-884c-d920cd_1iqxraz.png)](https://downloads.intercomcdn.com/i/o/h5estzhi/1319593377/3498fc8aaae9a721f5dc7f2e86af/28929371267095?expires=1767713400&signature=bc1f8bc7ec25f2dcc9cb8eb73ea33ef3b21a17bc3ac231c745b20fe25132fca7&req=dSMmH8x3noJYXvMW1HO4zTokpVJJbEP66wnzn6bT%2F%2FwRpm00zHxF9j%2BLKRrZ%0A3ssU%0A)

**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](https://help.booklikeaboss.com/en/articles/10341631-design-with-flex#h_22f3751cec).

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.
Click the desired size unit.

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/4/0/0/b40023a59a5af800/7d18a835-d375-4575-b4b0-952af6_17lswxy.png)](https://downloads.intercomcdn.com/i/o/h5estzhi/1319594540/c9aac0dd0005b3e0114ab33bb14f/28929402588311?expires=1767713400&signature=5589e4cb6a6a87cfa30d8daeaae92c86db7d81b85e63c0a44c73a08574832c97&req=dSMmH8x3mYRbWfMW1HO4zd6vd0BS00Wa7wLt5J%2BWoNNOUUhOiVuz2R2%2B6wPu%0AWQWA%0A)