Tip:
Highlight text to annotate it
X
Margins, padding, and borders are all part of the so called box model of CSS.
In this model the margin is the space around an element and can be set using the margin
properties. Padding on the other hand is the space between
the element and its border, and is set using the padding properties.
Neither one of these properties will inherit and they can be applied to all elements.
In this example we have a div element containing an image, both with their own borders.
If we add an margin to the image it will appear around the border separating it from the div
element. Padding will instead appear inside the border,
separating it from the image. Margin and padding can both use the percentage
value, but only margin can have negative values. Just like the border properties the sides
for margin and padding can be changed independently by using values for the top, right, bottom,
and left side. There are also separate properties for setting the sides, both for margin and
padding.