CSS Box Model

---

---

---

The box model is one of the fundamental concepts in CSS, it is used to configure the appearance of elements and the overall layout of documents.

A HTML box has a content area and optional surrounding padding, border, and margin areas; the size of each area is specified by properties.

Explanation of the picture:

• Margin - is the area outside of the element. Margin always transparent. (may have a negative thickness)
• Border - appear around HTML elements, on the outer edge of any padding.
• Padding - clears an area around the content and inherits the background color of the content area.
• Content - content area (text, images and etc).

Example: CSS Box Height

.CSSBox {
    height: 100px;
    padding: 10px;
    margin: 10px;
    border: 5px solid #ccc;
}

The total height of the element in the example is 150px

CSSBox height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

CSSBox height = 100 + 2 * (10 + 5 + 10) = 150px

Example: CSS Box Width

.CSSBox {
    width: 150px;
    padding: 5px;
    margin: 10px;
    border: 2px solid #ccc;
}

The total width of the element in the example is 150px

CSSBox width = width + left padding + right padding + left border + right border + left margin + right margin

CSSBox width = 150 + 2 * (5 + 2 + 10) = 184px

Remember: CSS attributes: "width" and "height", only define the width and height of the content area.

More about box model you can read here: Box Model and here: CSS basic box model

---