CSS Box Model
Box Model In CSS :
All HTML components can be viewed as boxes. In CSS, the term “box model” is employed when speaking about design and layout.
The CSS box model is essentially a package that systems about HTML components, and it includes: edges, borders, support, and the actual content.
The box model allows us to place a edge about components and room components in terms of other elements.
The picture under shows the box model:
The CSS box model is essentially a package that systems about HTML components, and it includes: edges, borders, support, and the actual content.
The box model allows us to place a edge about components and room components in terms of other elements.
The picture under shows the box model:
- Margin – Clears a place around the border. The margin does not need a history color, it is totally transparent.
- Border – A Border that goes around the support and content. The Border is suffering from the backdrop color of the field.
- Padding – Clears a place around the content. The Padding is suffering from the backdrop color of the field.
- Content – This content of the field, where text and images appear.
Width and Height of an Element :
When you collection the size and level attributes of an element with CSS, you simply collection the size and level of the material area.To assess the total measurement of an element, you have to also include the support, edges and margins.
The total width of the element in the example below is 275px :
width:250px;
padding:5px;
border:2.5px solid gray;
margin:5px;
Let’s do the math:
250px (width)
+ 10px (left + right padding)
+ 5px (left + right border)
+ 10px (left + right margin)
= 275px
The total width of the element in the example below is 275px :
width:250px;
padding:5px;
border:2.5px solid gray;
margin:5px;
Let’s do the math:
250px (width)
+ 10px (left + right padding)
+ 5px (left + right border)
+ 10px (left + right margin)
= 275px
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
