Scribd
Upload
6 views

6-CSS Box Model

Uploaded by

najmafaiz155
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

6-CSS Box Model

Uploaded by

najmafaiz155
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

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?

You might also like