What is CSS box model ?

• Whenever a website is loaded on the browser,the rendering engine loads the elements of the document in a rectangular box content which is set as per the standards of the CSS box model.
• Sounds boring? May be this can help…. It can also be said as it loads the contents as per the rules which are been defined for it specifically & when defining those rules there are certain restrictions that are meant to be kept in mind.
• Still tough to digest?
• OK for now just remember there are certain set of instructions that are meant to be followed.That Sounds Great 😉

So what is inside CSS box model?

As you can see in the above image there are number of things that are part of the CSS Box Model.

Lets start the Catalog inside-out:

• Content
• Padding
• Border
• Margin

What is Content Area ?

• Here the content i.e., Images,Videos,Text & etc. Which is real and integral part of the website element is shown.
• You can give desired height & width to the content box and not just this you can even add background image or background color as per your choice.
• By default the box-sizing property is set to content-box.
• you can use: width, min-width, max-width, height, min-height, and max-height properties as per your requirement.

What is Padding?

• The padding area is bounded by the padding edge & extends the content area to include the element's padding.
• In simpler terms this helps you beautify the visual appearance by adding some spacial adjustments.
• You can use: padding-top, padding-right, padding-bottom, padding-left and some other shorthand padding properties to manage thickness of padding as you desire.

What is Border Area ?

• Border Box is where you tell the browser how you want the border of the content to look.
• the border area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties – You can also manage background color and image accordingly with some additional shorthand properties.

What is Margin ?

• Margin can be understood as margins that we draw on the page to separate the contents of the page.
• In same manner in CSS Box Model we use margin to separate content from the other contents of that Element.
• The size of the margin area is set with margin-top, margin-right, margin-bottom, margin-left and some other shorthand margin properties.
• If you over see margin are being shared between two different boxes that's called as margin collapsing.
• This happens when the margins are not clearly defined and need to be defined clearly.