1 CSS Box Model
Prepared by: Asst.pro Mohammad Edris Naderi
Year: 1402 – autumn
2 CSS Box Model
Understanding the Box Model Concept:
The CSS Box Model is a fundamental concept that describes how elements are
displayed and structured in CSS.
It represents the content of an element as well as the space around it.
3 CSS Box Model
The Box Model consists of four components: content, padding,
border, and margin.
The width and height of an element are calculated based on these
components.
4 CSS Box Model
Box-Sizing Property:
The `box-sizing` property determines how the width and height of an element are
calculated.
It has two possible values: `content-box` and `border-box`.
The default value is `content-box`, which includes only the content area in the width
and height calculation.
5 CSS Box Model
The `border-box` value includes both the content area and the
padding and border in the width and height calculation.
Using `border-box` can simplify layout calculations and make it
easier to work with elements.
6 CSS Box Model
Margin, Padding, and Border Properties:
`margin` property sets the space outside of an element.
It defines the space between the element and adjacent elements.
`padding` property sets the space between the content area and the
element's border.
7 CSS Box Model
It provides inner spacing within the element.
`border` property sets the border around the element.
It can specify the width, color, and style of the border.
8 CSS Box Model
Width and Height Properties:
`width` property sets the width of an element's content area.
It can be specified using different units such as pixels, percentages, or relative units like
`em` or `rem`.
`height` property sets the height of an element's content area.
Like `width`, it can be specified using different units.
9 CSS Box Model
When calculating the total width and height of an element, the
following formula is used:
Total Width = width + padding-left + padding-right + border-left +
border-right + margin-left + margin-right
Total Height = height + padding-top + padding-bottom + border-top
+ border-bottom + margin-top + margin-bottom
10 CSS Box Model
Understanding and working with the box model is crucial
for properly positioning and sizing elements on a
webpage.
11
Questions?
