Edit an element's height, width, padding, or margin in the visual editor.
You can adjust the height, width, padding, and margin of an element to refine your layout and visual balance. For example, you could resize an image or adding space around a text element to separate it from nearby content.
Box model overview
Page elements are wrapped in a content box, which includes several adjustable properties that control how the element interacts with surrounding content. Adjusting margin and padding helps you control how tightly or loosely elements are spaced.
- Content — the area where your content (e.g., text or images) appears; adjust with Width and Height under Dimensions
- Padding — adds space inside the box, between the content and the border
- Border — an optional outline around the content box; can be styled in Borders
- Margin — adds space outside the border to push other elements away
Note
Check out this Mozilla article on how box models work for more detailed info.
How to adjust the dimensions
In the visual editor:
- Select an element
- Go to Dimensions in the Changes panel
- Adjust the element's height and width settings
How to adjust the spacing
In the visual editor:
- Select an element
- Go to Spacing in the Changes panel
- Adjust the element's margin and padding settings