Margin & padding: the creation of negative space
Negative space is an important element of design and is especially prominent in UI design that promotes readability by guiding the user through a page. The layout and composition of page are essentially made up of containers with content in them. Margin and padding makeup the negative space around content and are comprised in the following manner.
Padding is the space around the content and between the border.
Margin is the space on the outside of the border and determines the proximity to other elements.
In this diagram, also known as the CSS Box Model (a special Michelangelo edition…) you will also see space for content and a border.
Content is simply the bounds of an image or text
A border surrounds the padding and content. A padding and margin can still exist around content without a border.
Below is an example that shows the differences between padding and margin.
On the left there is padding around the text, with no margin. There is space around the content and the text wraps and extends downwards.
On the right there is a margin but no padding. The text is against the margin and the margin extends outwards defining how close the left element can be.
Here are some things to keep in mind. Margins allow us to define space between elements and padding allow us to define space inside an element. These differences are important to remember when laying out a design, as negative space will affect the composition of a design as well as where users focus throughout a page.
