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.