CSS
Topperworld.in
Box Model
⚫ The CSS box model is a container that contains multiple properties
including borders, margins, padding, and the content itself.
⚫ It is used to create the design and layout of web pages.
⚫ It can be used as a toolkit for customizing the layout of different elements.
⚫ The web browser renders every element as a rectangular box according to
the CSS box model.
❖ Multiple properties of Box-Model in CSS
➢ Content
This contains the actual data in the form of text, images, or other media
forms and it can be sized using the width & height property.
➢ padding
This property is used to create space around the element, inside any defined
border.
➢ border
This property is used to cover the content & any padding, & also allows
setting the style, color, and width of the border.
➢ margin
This property is used to create space around the element ie., around the
border area.
The following figure illustrates the Box model in CSS.
©Topperworld
CSS
➢ Content Area
This area consists of content like text, images, or other media content. It is
bounded by the content edge and its dimensions are given by content-box
width and height.
➢ Padding Area
It includes the element’s padding. This area is actually the space around the
content area and within the border-box. Its dimensions are given by the
width of the padding-box and the height of the padding-box.
➢ Border Area:
It is the area between the box’s padding and margin. Its dimensions are given
by the width and height of the border.
➢ Margin Area
This area consists of space between the border and the margin. The
dimensions of the Margin area are the margin-box width and the margin-box
height. It is useful to separate the element from its neighbors.
❖ CSS Box Model Working
For setting the width & height properties of an element(for properly rendering
the content in the browser), we need to understand the working of the CSS Box
model.
©Topperworld
CSS
While setting the width and height properties of an element with CSS, we have
only set the width and height of the content area. We need to add padding,
borders, and margins in order to calculate the full size of an element. Consider
the below example.
p{
width: 80px;
height: 70px;
margin: 0;
border: 2px solid black;
padding: 5px;
}
The total width for the element can be calculated as:
Total element width = width + left padding + right
padding + left border + right border + left margin +
right margin
The <p> element can have a total width of 94px.
Total width = 80px (width) + 10px (left padding + right padding) + 4px (left
border + right border) + 0px (left margin + right margin) = 94px.
The total height for the element can be calculated as:
Total element height = height + top
padding + bottom padding + top
border + bottom border + top margin
+ bottom margin
The <p> element can have a total height of 84px.
Total height = 70px (height) + 10px (top padding + bottom padding) + 4px (top
border + bottom border) + 0px (top margin + bottom margin) = 84px.
©Topperworld
