Today we’re going over the “CSS Box Model”. Think of all of the elements on an HTML page as boxes. If they were, this is what you would see if each layer of that box was pointed out to you. The 4 layers of the box model are margin, border, padding, and content. Once you understand the “CSS Box Model” you’ll also understand how CSS can manipulate the 4 layers of any element on your site.

So lets get started.

Here is a better description of each of the 4 layers of the CSS Box Model:

1. Margin: Creates an area around the border. The margin does not have a background color, it is completely transarent.
2. Border: A border goes around the padding & content and is affected by the background color of the box.
3. Padding: Creates an area around the content and is also affected by the background color of the box.
4. Content: This is where the text or images would appear.

So now that you know these 4 layers, when you specify the width and height properties of an element with CSS you should realize that your really just setting the width and height of the “Content” layer of the element. To know the full size of the element you must also know the padding, border, and margin for that element.

Here is the actual CSS you could use for each layer.

Remember that these examples are “INLINE” CSS, if you don’t want to make “INLINE” CSS changes some other methods you could use to make the same changes are by using a class, id, or tag identifier with a separate CSS document or a completely separate set of style tags embedded within the page’s HTML.

And that’s it, that’s our 4th episode in the “CSS To The Rescue” series. If you’ve learned something today that you realize your site could use and you don’t have the time or effort to put into changing or debugging a CSS issue on your site. Consider asking us to help you with these changes! We can comb your site and pick out all of the major outlying issues. Repair them with specific tests for your site, and then procure and analyze the change’s overall effect, and present you with the winning changes. It’s that easy!