Set the Spacing inside and around Blocks.
The best way to visualise the Spacing is the box model example:
Margin Area
Padding Area
Border
Content Area
These properties UI supports:
Toggle between setting each value separately or as a group.
Link block ( top & bottom ) values and inline ( left & right ) values.
Padding
padding-top , padding-right , padding-bottom , padding-left
The space inside the block, between the content and the border.
Don’t use inline padding to control the content width
Avoid using large inline padding (padding on the left and right) values to restrict content width, as it can cause the content to overflow or not scale properly. Instead, use max-width and auto margins to control the blocks size while keeping the content flexible.
Margin
margin-top , margin-right , margin-bottom , margin-left
The space outside the block, creating distance from other blocks.
Auto Margins for Horizontal alignment
The margin property accepts the auto value which the browser will use to calculate the space around the block. This can be used with max-width to center the block.
For example:
block with auto margins
To do this set the: