So the Basics of CSS saga continues! In this basics tutorial, we're going to talk about the very interesting box model!

The Box Model

All HTML elements can be considered to have an invisible box around them (assuming you have no borders or padding). Consider the following:

<p style="background-color:green; color:#fff;">Some text here</p>
<p style="color:#fff;">Some more text here</p>

Let's try it! This is some text and this is some more text.

So where's this box?! Well... This HTML element is actually surrounded by margins, borders, padding, and the actual content. This box model is illustrated by the background we created. We can see the "box" around the content portion of the box.

box-model

As we can see by this picture, we have our margins, borders, padding, and content. That is what every HTML element is surrounded by. Most browsers, by default, will automatically keep the margins, borders, and padding of content at zero..

body, html {
     margin:0;
     border:0;
     padding:0;
}

So those three properties are values are essentially understood by some browsers. Now, to clarify for every browser, you should include these first and foremost in your CSS document — before everything else.

What is what?

  1. Margins — can be thought as an always invisible area around the border.
  2. Border — can be different styles, colors, and thicknesses and it is the area that surrounds the padding.
  3. Padding — is the area around the content and it is relative to the background color of the box. So if your box is set to blue then the padding will also be blue.
  4. Content — the content is well, content. Text, images, links, lists, all of that good stuff!

Great! Now we know all about this box model but what use is it? Well in order to correctly set the size of an element you actually need to be aware of this box model.

Height and Width

So why is it so crucial to be aware of this box model? Well, when you define the height it width of an element you're only defining the height and/or width of the content of the box model. So if you decide you want to add margins and some padding to an HTML element you can calculate the real width and real height.
Consider the following:

selector {
     width:500px;
     height:250px;
     padding:20px;
     margin:25px;
     border:5px solid #470b0b;
}

So let's calculate the real width and real height!

Width

500px (width) + 40px (left and right padding) + 50px (left and right margin) +
10px (left and right borders) = 600px total width

Height

250px (height) + 40px (top and bottom padding) + 50px (top and bottom margin) +
10px (top and bottom border) = 350px total height.

So why does this matter in the end? It's good to know the exact height and width of an element because if your webpage or a particular area within a webpage is dependent on being a certain height then you'll want/need to know the exact height of other elements to make sure your web page is exactly how you intend. Sometimes elements can overlap, move in extreme places, and other assorted nasty things when you don't know this real width and real height.

Be Sociable, Share!