Learn CSS Box Model with Examples
CSS Box Model : Content , Padding , Border , Margin
29 November, 2022
2
2
0
Contributors
In this blog we will learn CSS Box Model and its Properties with Examples. Everything is represented by a box in CSS.
For example if we want to create a circle or we want browser to interpret our rectangular box as a circle then we can make a circle by changing the border-radius to 100%.
Box Model has 4 parts
•
content
•
padding
•
border
•
margin
Content
Everything inside the box is called
content . Here whatever inside the green border , is content for outer box . Also the box inside it which has border of 0 and the content is red color for inner box.
When we want to add extra space between our
content and the border , we use padding . It is helpful when we want to add extra space without changing the content size.Even after increasing class .bigBox padding , it has no affect on the size of content.
It is the last part of our CSS model . It ontributes to the overall size of our CSS box model. It is between the padding and outside part of that element.
It contributes to the distance between different elements inside the body.
In normal document flow( without using float , flex , grid etc.) if we have two siblings elements have some margin then only the largest of the two margins is used as space between these two elements.
Without
box-sizing:border-box our component will look like this.
Even boxes are of same size , but when we change it size it only applies to content only. But if we want to change the size of any component including its border , then we use
box-sizing.Comment if I have committed any mistake.
Let's connect on my socials.
I am always open for new opportunities , if I am free :P
2
css
100daysofcode
webdev
boxmodel
develevate