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:

#example1 {
margin: 5px 10px 5px 8px;
padding-left: 20px;
padding-bottom: 10px;
}

Now, the trickiest part with margins and padding is how it effects the box’s width and height. When you add a margin or some padding to a box, that amount is now subtracted from the part of the box available for content. So, if you make your box 500px, then add a 10px margin, you now only have 460px for your content (10px from each side and the top and bottom). So if you want 500px of content, you need to change your width to 540px (add the 40px margin into the width). Check out the image for an example.

If you have any questions, please feel free to leave them in my comments. This is my first ever kinda-tutorial, so please be kind.

by Nicole |