Search within TutorialsPark

CSS Box Model

Understand and apply the core concept of CSS Box-Model.

CSS Box-Model

1. The Most important and core concept of CSS is the box-Model

2. According to the box-model concept every html element is considered to be a box, the position of which is based upon the flow of the webpage (i.e the order in which the element appears within the document).

3. Based on this concept every HTML element(or Box) is classified as either:

block-element : Elements of this type always begins on a new line and occupies all horizontal available space on that line, pushing all successive elements to the next line.

inline-element : Elements of this type occupies space in-between the previous and succesive elements.And does not begin on a new line

4. However, CSS allows you convert an inline element to a block-level element and even remove an element from the document flow .

5. CSS Box model concept is used to control the width and height of the element and even the spacing around the horizontal and vertical direction. Also have a border around the element

CSS Box Model

CSS Box Model

CSS Box Model: Explanation

1. The above Box model comprises of four components:

Margin : The Margin is the space in-between the element's border and its surrounding elements. It just empty space(no background-color, opacity etc)

Border : Its a boundry line drawn around the padding of the element. It can be styled with colors, border-types etc

Padding : The space in between the element's content and the border is called padding. It takes the background-color of the element

Content : Its the Contents of the Element, it can be an image, text , audio , video etc.

CSS Box Model: Width and Height

1. You can define the horizontal and vertical dimensions of the element using width and height property.

2. The default value of width and height is auto (i.e the element expands or contracts to fit to the dimensions of the box), but you can also specify the dimensions of the content using length values (px, em , %).

3. According to W3C Box model definition, when you define the width and height using the width and height property it for the of the content(images, text etc) only.

4. However, the actual area occupied is the content-area plus padding plus the border.

The total area of the content is calculated as:

content-area + Padding(left + right + bottom + top) + Border(left + right + bottom + top)

The total width of the content is calculated as:

Apparent-Width = width(content) + left-padding + right-padding + left-border + right-border+ left-margin+ right-margin

The effective width of the content is calculated as:

width(total) - left-padding - right-padding - left-border - right-border - left-margin- right-margin = width(actual)

Note: The same concept is applicable for calculating the apparent and effective height of the content as well.

Example: CSS Box Model - width(content + padding + border + margin)

Give it a TRY! » Note: IE version before IE8 considers padding and border as the width of the content

Example: CSS Box Model - height(content + padding + border + margin)

Give it a TRY! » Note: IE version before IE8 considers padding and border as the height of the content