Become Wordpress Professional - Your Ultimate Wordpress Guide

Wednesday, 13 March 2013

CSS Concepts of Box Model

No matter what the topic is, you can always find the handful of core concepts that are critical to understand the subject properly. For CSS, the box model is certainly one of those concepts. Without understating the box model, almost every task related to the physical relationship of elements would be more difficult. If on the other hand you've thorough grasp of the box model, task like page layout becomes much easier.

What is Box Model?

So what is Box model? Well the box model is the term used to describe the rules surrounding the physical property of all HTML elements. If that makes you go HEN! Then think about it this way. Every single element in your web page to be a rectangular box. The property of this box is:
  • Width
  • Height
  • Border
  • Margin
  • Padding
These properties not only define the size of the element but how it relates to the elements around it. So yeah it's pretty important.
First let's cover the basics, the properties that make up the box model. Now here we have nice visual presentation of a box model. This could be a paragraph, a heading, a list item, really any element on your web page.

If we start from outside of an element, the first item that we'll encounter is the elements margin.

What is Margin?

Margin represents the space around an element and are used to define the space between the page elements. Margins are not used to calculate the final width of an element but as you can see the very important in terms of how element relate to each other and how much space an element requires within layout.

What is Border?

The next element we come to is Border. All elements are allowed to have a border assigned to it even though by default most element don't have one. Borders have three properties that define the border it self.
  • border-width
  • border-style
  • border-color
You can also define borders individually to the top, left, bottom and right side of an element. Borders are considered to be the part of the box model because they define the outside edge of an element and because their physical size is used when calculating the overall size of the box model. This often is overlooked in many layouts and more often than not it can cause serious problems. Forgiving to add the size of the border to the size of an element can cause tight layouts to break. It's element would be anywhere between 2 to 4 pixels larger than anticipated.

What is Padding?

After Borders we have padding. Padding is space added to an element inside the border. The easiest way to think of this is to imagine the box with something fragile inside of it that you need to ship.

More then likely you are gonna add some packing material to the box to keep the fragile object from touching the edge of the box, that's padding.

Padding is totally transparent and it's value is used to calculate the overall width and height of an element.

What is Width and Height?

Finally we have width and height property. You can set this properties for any element using either percentages or fixed unit of measurement. It's important to remember however, there is big difference between the width and height properties and the total width and height of an element.

css concepts of box model

This tends to be very confusing to those who are new to CSS or simply unfamiliar to the box model. To calculate the total with of an element use the left and right border values, left and right padding values and content width.

{left border+left padding+content width+right padding+right border=total width}

If you'er thinking that this is probably tripped up a lot of designers, you'd be right. Often layout will break because the total width of an element is greater then anticipated. However, understanding this concept gives you the ability to confidently set values to all the box model properties to fit specific layout or regions. The box model for the most part is pretty simple.
There are however a few thing to contribute if you are not careful.
  • If the property is not declared, don't assume the value is 0
  • Elements often have default margins that you need to account for
  • A 100% width property when combined with padding and border will create elements that are larger then their parent


Post a Comment

Please Avoid Spamming. Comments will be moderated before they are published.