How CSS Box Model Works - Beginner

Well it has been may days since I wrote my last blog. I was busy with my work and it was very messy. It has crossed my mind several times to write a blog, but I couldn't find any luxury time to write one.

So, I have came up with a small topic regarding the CSS Box Model.

CSS box model is a model where you treat your every component as a box. Then you using these box (i,e your html element) and put it around the page to setup the layout. Well most of the beginner coder knows how the CSS box model works.

But still I think it might be good idea for those who didn't to know how the CSS box model actually works. So, that they can actually begin to understand the CSS positioning and styling by themselves.

Now let us see the box model

As you can see the HTML element is surrounded by Padding.
Padding is the space around the HTML element. In CSS tag you can use the Padding property as below

• padding:value;  [this will put free space equal to the value (say 3px) around the HTML element.]
• padding:val1 val2; [this syntax will set free space equal to val1 in up-down direction and val2 in left-right direction]
• padding-left:value; [to explicitly define the left padding value for the html element]
• padding-right:value; [to explicitly define the right padding value for the html element]
• padding-top:value; [to explicitly define the top padding value for the html element]
• padding-bottom:value; [to explicitly define the bottom padding value for the html element]

The Margin property is also like the padding property but unlike the padding free space, which cannot be filled with other elements, margin space can contain other elements.
You can think padding and the HTML element as a HTML element itself. But that is not necessarily true for the margin property.
Margin property will put up margin equal to the value you set in the margin property.
You can use many form of margin property and they all like padding property usage.

• margin:value;  [this will put margin space equal to the value (say 3px) around the HTML element.]
• margin:val1 val2; [this syntax will set margin space equal to val1 in up-down direction and val2 in left-right direction]
• margin-left:value; [to explicitly define the left margin value for the html element]
• margin-right:value; [to explicitly define the right margin value for the html element]
• margin-top:value; [to explicitly define the top margin value for the html element]
• margin-bottom:value; [to explicitly define the bottom margin value for the html element]

Now the offset is used to put the element into the right position and usually have four properties-

• left:value;
• right:value;
• bottom:value;
• top:value;

All of them takes a single value or percentage of the total width of the document on the screen (generally screen resolution).  They tells the browser about the elements to be placed according to the given offset value.

Very basic stuff discussed here, but I think if any one has clear idea how the model works they can understand how to place the element rightly.

One last point, different browser handles the box model differently. The model here I describe works best with firefox browser. There is only one big difference with the IE's box model is that, in IE's box model the padding isn't included in to the element itself. But in firefox (gecko to be more exact) box model consider padding as associated with the html element itself.

Thank you for reading the post. If you have any question, suggestion or anything, please leave a comment. Keep in touch.