EN/CH Mode

BRUCE_FE CSS Interview Notes - CSS Box Model and Display

Deep understanding of CSS Box Model, mastering the differences between content-box and border-box, and how different display properties affect element layout. Includes advanced concepts like margin collapse and analysis of common interview questions.

EN/CH Mode

Lazy to read articles? Then watch videos!

What is CSS Box Model?

CSS Box Model is the foundation of CSS layout, describing how HTML elements generate a rectangular box and defining how the box's dimensions are calculated. Each box contains four parts, arranged from inside to outside:

1. Content: The space occupied by the actual content of the element
2. Padding: The space between the content area and the border
3. Border: The border surrounding the content and padding
4. Margin: The space between the box and other elements

Margin

Border

Padding

Content

Element Content

The total width calculation of an element depends on the box-sizing property value:

/* Standard Box Model (Default) */
box-sizing: content-box;
Total Width = width + padding-left + padding-right + border-left + border-right

/* IE Box Model */
box-sizing: border-box;
Total Width = width (includes content, padding and border)

Importance of box-sizing Property

box-sizing property defines how the browser calculates the total width and height of an element:

content-box

width: 200px
padding: 20px
border: 5px
Total Width = 250px

width only specifies the width of the content area, padding and border will increase the total width

border-box

width: 200px
padding: 20px
border: 5px
Total Width = 200px

width specifies the width of the entire box, padding and border will compress the content area

In modern web development, many developers prefer to use border-box because it makes element dimensions more intuitive and controllable:

/* 常見的全局設置 */
* {
  box-sizing: border-box;
}

Practical Applications of Box Model

1. Fixed Width but Variable Padding: Advantages of border-box

.card {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
}

@media (max-width: 768px) {
  .card {
    padding: 10px; /* Padding becomes smaller but total width remains 300px */
  }
}

Display Property and Box Model

display property determines the display type of an element, directly affecting how the Box Model behaves. Different display values will change the layout characteristics of elements:

block

block element

• Occupies a single line
• Can set width/height
• margin/padding effective
• Default width is 100% of parent container

inline

inline elementanother inline element

• Shares line with other elements
• width/height not effective
• Horizontal margin/padding effective, vertical only affects visual
• Width determined by content

inline-block

inline-blockanother inline-block

• Shares line with other elements
• Can set width/height
• margin/padding fully effective
• Combines advantages of inline and block

flex

flex item 1

flex item 2

• Creates flexible layout container
• Child elements can flexibly distribute space
• Can control child element alignment
• Simplifies complex layouts

/* Common display values and their impact on Box Model */
.block-element {
  display: block;
  width: 100%;
  height: 50px;
  margin: 10px 0;
}

.inline-element {
  display: inline;
  /* width and height not effective */
  width: 100px; /* Invalid */
  height: 50px; /* Invalid */
  /* Horizontal padding/margin effective, vertical only visual effect */
  padding: 10px;
  margin: 10px;
}

.inline-block-element {
  display: inline-block;
  width: 100px; /* Effective */
  height: 50px; /* Effective */
  padding: 10px; /* Fully effective */
  margin: 10px; /* Fully effective */
}

2. Display Switching in Responsive Layout

.navigation {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .navigation {
    display: block; /* Switch to vertical stacking on small screens */
  }
  
  .nav-item {
    display: block;
    margin-bottom: 10px;
  }
}

Advanced Concepts of Box Model

Beyond basic Box Model knowledge, there are some advanced concepts that are crucial for understanding CSS layout:

Margin Collapse

When the margins of two vertically adjacent block-level elements meet, they form a single margin whose size depends on the larger of the two margins.

Element 1 (margin-bottom: 20px)

Element 2 (margin-top: 30px)

The actual spacing between the two elements is 30px, not 50px

/* Margin Collapse Example */
.element1 {
  margin-bottom: 20px;
}

.element2 {
  margin-top: 30px;
}

/* Actual spacing is 30px, not 50px */

🔥 Common Interview Questions

(1) Please explain the components of CSS Box Model

Answer: CSS Box Model consists of four parts:

1. Content: Contains actual content like text, images, etc.
2. Padding: Transparent area between content and border
3. Border: Boundary line surrounding content and padding
4. Margin: Transparent area around the box, used to maintain distance from other elements

Visually, it's a structure built from inside out, starting with content, then padding, border, and margin.

(2) What's the difference between content-box and border-box?

Answer: Both are box-sizing property's two different values, affecting how box dimensions are calculated:

content-box (Standard Box Model): width and height only specify the dimensions of the content area, total dimensions need to add padding and border. Formula: Total Width = width + padding-left + padding-right + border-left + border-right
border-box (IE Box Model): width and height specify the total dimensions including content, padding and border. Formula: Total Width = width (includes content, padding and border)

border-box is more intuitive, making it easier to design fixed-width elements because changes in padding and border won't affect the element's total width.

(3) Differences between block, inline and inline-block

Answer: These three display values have significant differences in their impact on Box Model:

Feature	block	inline	inline-block
Space Occupation	Occupies single line	Arranges within a line	Arranges within a line
Width	Default 100% of parent	Determined by content	Determined by content
width/height	Effective	Not effective	Effective
margin	Effective in all four directions	Effective horizontally, not vertically	Effective in all four directions
padding	Effective in all four directions	Visually effective, but vertical direction won't push other elements	Effective in all four directions
Typical Elements	div, p, h1-h6	span, a, em	button, input

Code Example:

/* block element */
.block-element {
  display: block;
  width: 200px;
  height: 100px;
  margin: 20px;
  padding: 15px;
  border: 1px solid #ccc;
} /* Occupies single line, all box model properties effective */

/* inline element */
.inline-element {
  display: inline;
  width: 200px;  /* Not effective */
  height: 100px; /* Not effective */
  margin: 20px;  /* Only left-right margin effective */
  padding: 15px; /* Visually effective but won't push up-down elements */
  border: 1px solid #ccc;
} /* Won't occupy single line, width/height not effective */

/* inline-block element */
.inline-block-element {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 20px;
  padding: 15px;
  border: 1px solid #ccc;
} /* Won't occupy single line, but all box model properties effective */

(4) Determine Margin Collapse situations in the following code

Answer: Margin Collapse only occurs between vertically adjacent block-level elements. Please determine the actual spacing in the following code:

.parent {
  margin-top: 20px;
}
.child {
  margin-top: 30px;
}

Analysis:

Between parent and child elements: .parent and .child margins will collapse, actual spacing is 30px (take the larger value).
Note: Horizontal margins never collapse; floating elements, absolutely positioned elements, and children of flex/grid containers also don't experience margin collapse.