Margin and Padding
Margin and padding both refer to white space around text or an image. In CSS, they are based on the box model. The box model contains detailed options for adjusting margin, border, padding, and content for each element [fig.1].
Margins are spaces between one object and its surrounding elements.
Paddings are spaces inside the border between the border and the actual image or text.
Use margin to separate the block from things outside it, padding to move the content away from the edges of the block.
Margin and padding provide a buffer between the main content and the supporting elements. Margin is used not only to bring harmony between the text/image and its surroundings, but also to add visual interest by contrasting the positive space of the screen (text, images) with the negative (white) space [fig.2]. Balanced margin and padding spaces can provide visual breathing room to make the viewing experience more easy and effortless, and they provide unity throughout a site's pages by creating a consistent look and structure.
Follow these guidelines to create harmonious proportion between text/image and its container:
- Give the text and its container the same shape.
- The content should have the same proportion, only smaller, as its container.
- A good margin ratio is 2 : 3 : 4 : 3 (top : right : bottom : left)
- Be generous with margin and padding spaces!
Padding should always add up to the total width of the element. For example, if the element is 100px wide, and the left and right paddings are set to 10px each, then the total width ends up being 120px.
Margin, however, expands the box model but does not directly affect the element itself. This tip is especially handy when lining up columns in a layout.