CSS Box Model Examples: See Padding, Border, and Margin in Action

📚 CSS Box Model Explained

The CSS box model is fundamental to understanding how elements are rendered in web browsers. It essentially describes the rectangular boxes that are generated for elements in the document tree and used in visual formatting. Let's break down the key components:

• 🧱 Content: The actual content of the element, such as text, images, or other media. Its dimensions are defined by properties like `width` and `height`.
• ➕ Padding: The space between the content and the border. Padding is inside the element, and its background color (if any) will fill this area. Controlled by properties like `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.
• ⏺️ Border: A line that surrounds the padding and content. Its style, width, and color are defined using properties like `border-style`, `border-width`, and `border-color`.
• Margin: The space outside the border, separating the element from other elements on the page. Margins are transparent. Properties include `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`. Collapsing margins can occur when vertical margins touch.

📏 Box Model Size Calculation

The total width and height of an element, as rendered on the page, are calculated as follows:

• 📐 Total Element Width: Content Width + Left Padding + Right Padding + Left Border + Right Border + Left Margin + Right Margin
• 📏 Total Element Height: Content Height + Top Padding + Bottom Padding + Top Border + Bottom Border + Top Margin + Bottom Margin

🎨 The `box-sizing` Property

The `box-sizing` property alters the default CSS box model. When set to `border-box`, the `width` and `height` properties include the padding and border, but not the margin. This can simplify layout calculations.

• 📦 `content-box` (Default): `width` and `height` apply only to the content area.
• 🧮 `border-box`: `width` and `height` include the content, padding, and border.

Practice Quiz

1. What part of the CSS box model sits furthest from the actual content?
   1. A. Padding
   2. B. Border
   3. C. Margin
   4. D. Content
2. Which CSS property controls the space between the content and the border?
   1. A. margin
   2. B. border
   3. C. padding
   4. D. content
3. What is the default value of the `box-sizing` property?
   1. A. border-box
   2. B. content-box
   3. C. margin-box
   4. D. padding-box
4. Which of the following is NOT a property related to borders?
   1. A. border-width
   2. B. border-style
   3. C. border-spacing
   4. D. border-color
5. If an element has `width: 200px`, `padding: 20px`, and `border: 5px`, and `box-sizing` is set to `content-box`, what is the total width of the element?
   1. A. 200px
   2. B. 225px
   3. C. 245px
   4. D. 250px
6. What area of the box model is transparent?
   1. A. Padding
   2. B. Border
   3. C. Content
   4. D. Margin
7. Which `box-sizing` value includes the padding and border in the element's total width and height?
   1. A. content-box
   2. B. border-box
   3. C. padding-box
   4. D. margin-box