CSS Box Model

Each and every element created using any HTML tag, is a box. The CSS box model, shows the margin, border, padding and actual space for content as different spaces, which together forms any element.

If you use Chrome Browser, press Command + Option + I (for Mac OSX) and F10 (for Windows OS).

• Now click on the Select an Element... icon, present at the top-left corner.

  

• After clicking on the above icon, now you can select and click on any HTML element, that you want to inspect.
• For example: We chose our sidebar, and immediately you can see the HTML element appear corresponding to the element selected under the Elements tab and on the right side, the CSS styling applied to that element is displayed.

  If you scroll down in the Styles section, you will see the Box Model representation for the selected element there.

  Try hovering your mouse over the Box Model representation in the Styles section and you will see that the same will be highlighted on the actual element.

What is Box Model?

The Box Model is nothing but representation of various sections of an element box. These components/sections are:

• content: This is the main area which holds the text and images inside an element.
• padding: This is the empty space around the content inside the element.
• border: This is the border around the content and padding.
• margin: This is the empty space outside the border.

Actual Height and Width of the Element

When we use CSS to specify height and width of an element explicitly, then this height and width is for the content area of the element. While the actual space occupied by an element is inclusive of content area, padding, border and margin.

#myelement {
    height:200px;
    width:200px;
    padding:10px;
    margin:10px;
    border:5px solid red;
}

Live Example →

For the above styling, HTML element with id as myelement must have a defined width and height of 200px. But the actual height and width occupied by this element will be different, as padding, border and margin must also be considered.

Actual Width: Width(200px) + left & right padding(10px + 10px) + left and right border(5px + 5px) + left and right margin(10px + 10px) = 250px

Actual Height: Height(200px) + top & bottom padding(10px + 10px) + top and bottom border(5px + 5px) + top and bottom margin(10px + 10px) = 250px

Box Shadow

Just like text-shadow, the property box-shadow is used to add a shadow to the entire element box.

Syntax:

box-shadow: <horizontal-displacement> <vertical-displacement> <blur> <color>;

blur and color values are not mandatory.

#box-shadow {
    box-shadow: 5px 5px 5px grey;
}

Live Example →