CSS Box Model. Still Confused?

 

The box model is the very fundamental concept of the CSS. Every the element in the HTML page is treated as the rectangular box object by the browser engine. The size, position and border of these rectangular items have been decided by the CSS rules. This is how the basic HTML and CSS are rendered in the browser.

Let’s get a wide perception of the rectangular box. This box has four layers;

1. Margin – Topmost layer
2. Border – Second topmost layer
3. Padding – next to the border area
4. Content – Main content ex: text, image etc.

To understand this just think yourself as a school kid and you were asked by your teacher to write something in the plain white paper.

Photo by Lukas on Pexels.com

Would you directly start writing from the top-left corner of the paper? If you did so, you might be scolded by your teacher. Just because you have missed drawing the margins.

Yes, now let’s go back to the Box Model concept. Similar to our school days, the margin area is the outermost layer for the HTML element. We can specify margin-top, margin-bottom, margin-left and margin-right for an element.

Followed by the margin, we can draw some nice borders to highlight our writings in the white paper. Same thing we can do in the HTML using CSS border property.

Inside the border, we leave some space and place the content in such a way it looks good. We can do so, using padding property in CSS. We can specify padding-left, padding-right, padding-top and padding-bottom.

I am sure it is a little troublesome to forget the CSS Box model after reading this.

Love What you do; Do What you Love

Js