CSS box model is a container which contains multiple properties including borders, margin, padding and the content itself. The web browser renders every element as a rectangular box according to the CSS box model.
Box-Model has multiple properties in CSS. Some of them are given below:
- content
- padding
- border
- margin
Content area
The innermost rectangle, known as the content area, may contain text or other visual elements. It is bounded by the content edge and its dimensions are given by content box width and height. If the element is a block element, then the content edge can also be set with the min-width
, max-width
, min-height
, max-height
properties.
If the box-sizing
property is set to content-box
, the content area's size can be explicitly defined with the width
, min-width
, max-width
, height
, min-height
, and max-height
properties
Padding area
Padding is the space between the border and content of an element. Padding is an important element in web design because it helps make content more visible and readable.
There are four padding properties,
padding-top
padding-right
padding-bottom
padding-left
All the padding properties can be changed independently or a short hand padding
property can be used to change all the values at once.
Short hand properties syntax:
padding
: padding-top
padding-right
padding-bottom
padding-left
;
Border area
It is the area between the box’s padding
and margin
. Its dimensions are given by the width and height of border.
The borders are calculated by the border-width
and shorthand border properties.
Short hand border
properties syntax :
border
: border-width
border-style
border-color
If the box-sizing
property is set to border-box
, the border area's size can be explicitly defined with the width
, min-width
, max-width
, height
, min-height
, and max-height
properties
Margin area
The space around the elements can be set using the CSS margin
properties.
There are four margin properties,
margin-top
margin-bottom
margin-left
margin-right
In addition to the above four properties, we also have a short hand property called margin
.
margin
: margin-top
margin-right
margin-bottom
margin-left
;
Margin clears the area around an element the difference is that it takes care of the area outside the border.The margins are transparent and cannot have any background colors.
Calculating Overall dimensions
How to calculate the total width of the box,
The total width of the element would follow the following formula,
Total element width
= width
+ padding-left
+ padding-right
+ border-left
+ border-right
+ margin-left
+ margin-right
.
How to calculate the total height of the box,
The total height of the element would follow the following formula
Total element height
= height
+ padding-top
+ padding-bottom
+ border-top
+ border-bottom
+ margin-top
+ margin-bottom
After spending some time and getting familiar with the basics of the CSS Box Model, it can be helpful in designing the layouts efficiently.
Top comments (0)