Setting a margin to auto will try and force the element to the opposite side. So, if you set both left and right margins to auto, the browser will put the browser in center.

Let’s take a look at the follow example CSS code, to be applied to a block element like a div:

.centerme{
  width:100px;
  margin-left:auto;
  margin-right:auto;
}

It is very important you set a width on the element. You cannot center align something that takes up the full width of it’s container. Imagine a room full of water, you cannot make the water go into the center of the room without forcing its sides in. Bit of an odd analogy, but you get the meaning.

The below div have absolutely no margin on it.

If we add 10 pixels margin:

As you can see, the CSS: .my_div { margin:10px; } adds 10 pixels of margin on ALL sides of the element. This includes the top AND bottom, left AND right, so be careful when positioning elements and calculating widths. A 10px margin on an element makes it 20 pixels wider, and 20 pixels higher.

CSS Box Model

The CSS Box Model is a lot simpler than how it may look at first sight. Let’s begin with the content. Think of the content area an an empty div element. You add your content to it as you normally would.
<div class="my_div">Some content here</div>

.my_div{ }

Simple. Now let’s add some padding.
.my_div { padding:10px; }
Now the content in the div is pushed in 10 pixels in every direction (top, bottom, left and right), making it 20 pixels higher (top AND bottom) and 20 pixels wider (left AND right). This is represented in the above diagram.

Now we can add a border to the content.
.my_div {
  padding:10px;
  border:10px solid green;
}
This adds a 10 pixel green border all the way around the div element. Assuming that the original div is 100px high and 100px wide it is now:
100×100px + 20×20px (padding) + 20×20px (border). Remember that the border takes up 10 pixels on the left AND right, aswell as the top AND bottom, meaning 20px height and 20px wide.

And finally we have the margin. The margin doesn’t add any size to the div itself but instead spaces it out away from other elements. Imagine margin to be identical to padding but on the outside of the box. If we add 10 pixels of margin it will add 10 pixels to every side of the box, making the box 20 pixels wider, and 20 pixels higher.

So let’s summarise, a 100px box, with 10px padding, 10px border and 10px margin:
.my_div {
  padding:10px;
  border:10px solid green;
  margin:10px;
}
Will be 100px + 20px + 20px + 20px = 160px.

The CSS Box Model is a very important and simple theory to master before starting a