CSS: Understanding Margins & Padding

If you are working with block elements in CSS, you need to know about margins & padding. Margins are the space on the outside of the border and padding is the space on the inside. The most common block elements are divs <div>, but you can also use the display property to make other selectors block elements such as your links. Like this:

a {
display: block;
}

This is way useful to make imageless SEO friendly CSS buttons, but that can be a topic for another day. Now, margins and padding can be measured in the usual ways: pixles, inches, points, ems. Just make sure you remember that you can’t just write the number (margin: 5;) you must include the unit of measurement (margin: 5px;). You can use margin-left: or padding-top: to effect whichever side of the box respectively. You can also define all 4 sides under the margin selector if you’d like, just remember the sides go clockwise, starting at the top then right, bottom, and left.

Here is an example: (more…)