Margins, Borders, and Padding, Which do I use?

How I Learned to Love the Box Model

One of the most confusing concepts in CSS is the difference between margins, borders, and paddding. The first step in moving from confusion to mastery in this topic is to talk about the box model. All elements have an invisible rectangler box surrounding it's contents. The inner most layer of the box is the content that is displayed on the screen. The second layer is the padding which surrounds the content. The third layer is the border which encases both the padding and the content. Finally,the outermost layer is the margin which is the invisible area surrounding the border.

So Why Can't I See It?

So you might be asking yourself if these things exists why can't I see it on the screen. Well you can, but you just might not know what you are looking at.The actual content takes up a very minimal amount of space. The rest is filled up by the padding that surrounds the content. It's hard to recongize the difference between the two because the padding inherits the background color of the content. Making it very hard to distinguish where the content ends and the padding begins.By default borders are invisible. However, you can see them if you creat a style rule to declare its width, size, and color.While margins are always the colorless space surrounding the element.

Working with Margins, Padding, and Borders

So now you know what margins and padding are. The next step is figuring out when to use them.

Margins are used when you need to add space between elements. You can add space to the top, right, bottom, and left of an element. You can also declare each style property separately, or all on one line.

Padding on the other hand is used to increase the space around the content without affecting the contents size. Just like the margin you can add space to the top, right, bottom, and left of an element. You can also declare each style property separately, or all on one line.

Borders are used to form the encasing around an element. You can declare the borders style, width, and color. These style properties can be applied seperately, or you can you define these properties all on in one line. Happy positioning!