Sizing and spacing
You can resize elements directly on the Canvas. This method is good for elements with fixed size that will not change depending on the content within them (e.g. Images). In this case, you simply control the size of an element by stretching it by the corner or by the control on one of its sides.
However, this method is not good for elements, whose size depends on the content within them. If you resize an element by dragging its borders on the Canvas, it will keep a fixed size. For example, when stretching a text element down, its height will be 150px:
When text is added to this element, it will go beyond the element’s boundaries:
For more flexible sizing use the settings in the Styles tab - Size.
You can set width (W) and height (H) to an element in the Size settings.
By default, the height of most elements is auto. This means that it adapts to its content.
Size settings properties:
- Auto size auto The size of an element is set automatically depending on its content.
- Pixels px The size of an element is set in pixels (the base unit).
- Percentage % The size of an element is set as a percentage relative to the size of a parent element. The size will change in proportion to changes in the size of the parent element. A value of 100% means the element takes up the entire width of the parent element.
- Em The size of an element is relative to its font size. 1em is equal to the element’s font size in pixels. The size changes in proportion to changes in the element’s font size.
- Viewport Width vw The size of an element is set as a percentage of the width of the browser window. 1vw is equal to 1% of the current width of the browser window. A value of 100% means the element will take up the full width of the screen.
- Viewport Height vh The size of an element is set as a percentage of the height of the browser window. 1vh is equal to 1% of the browser window current height. A value of 100% means the element will take up the full height of the screen.
Extra properties in the Size settings:
- Min or Max (minimum and maximum element height and width)
With min size you can set limits on how small an element can be, so that it doesn't get smaller even if there is little or no content in it. This can be used, for example, to create a Section that is full screen high. If you set the minimum section size to 100vh, its height will fill 100% of the screen height even with a little content, and in the case of content overflow it will become larger and the content will not be cut off.
- Overflow
You can use Overflow to control the content that goes beyond the boundaries of an element. Overflow occurs automatically when an element has a fixed width and height and there is not enough space for the content inside.
By default, text that overflows an element is visible: the Visible option is selected.
Other overflow options:
- Hidden The content that overflows the boundaries of an element is hidden.
- Scroll You can find a scroll bar (depending on the operating system and browser) to scroll the content within an element.
- Auto You can scroll the content if it overflows an element.
To set the spacing between elements, you need to set margins and paddings.
- Margins Margins define the space between the borders of an element and its neighboring elements and are highlighted in yellow.
- Paddings Paddings define the space between the borders of an element and its content and are highlighted in green.
You can set margins and paddings both to all sides and selectively.
Margins and paddings can be set and changed directly on the Canvas or in the Styles tab.
To set the margin:
- select an element on the Canvas
- move the mouse cursor over the control on the border of the element and move it slightly outward from the border of the element until a yellow double-headed arrow appears
- hold down the left mouse button and drag in the desired direction
- margin will be highlighted in yellow, and its current value will be indicated on the label next to the arrow
- when the desired value appears, release the mouse button.
To set the padding:
- select an element on the Canvas
- move the mouse cursor over the control on the border of the element and move it slightly inward from the border of the element until a green double-headed arrow appears
- hold down the left mouse button and drag in the desired direction
- padding will be highlighted in green, and its current value will be indicated on the label next to the arrow
- when the desired value appears, release the mouse button
You can change margins and paddings simultaneously:
- from two opposite sides of an element - by dragging the arrow with the mouse and holding down the Alt key
- from four sides of an element - by dragging the arrow with the m ouse and holding down the Shift key
On the Styles tab, margins are displayed in yellow and paddings - in green.
You can use the following methods to set margins and paddings:
- enter a value by clicking on the current value of the corresponding margin or padding
- click on the drop-down list and in the next window select the desired value using the slider
- move the mouse cursor on the respective margin or padding, hold down the left mouse button and drag the arrow that appears in the desired direction
You can change margins and paddings simultaneously:
- from two opposite sides of an element - by dragging the arrow with the mouse and holding down the Alt key
- from four sides of an element - by dragging the arrow with the m ouse and holding down the Shift key
Margins and paddings can be set in the following units:
- Pixels px Margins and paddings are set in pixels.
- Percentage % Margins and paddings are set as a percentage relative to the size of a parent element. Setting margins and paddings as a percentage can be handy when adapting a site for different devices. In this case, when an element is resized, its margins and paddings will automatically adjust to its size.
- Em Margins and paddings are set relative to the element’s font size. 1em is equal to the element’s font size in pixels. The size changes in proportion to changes in the element’s font size. Setting margins and paddings in em can be handy for text elements when adapting a site for different devices. In this case, when changing the font size, margins and paddings of an element will change automatically.
Margins can take negative values. In this case, an element is shifted towards the respective margin and overlaps the neighboring elements.
Margins can be fixed and also set to auto. The auto setting for both left and right margins is used to horizontally center an element relative to its parent element.
