Frontend Hub/CSS Course
Bài học: Box Model

Course Content

CSS Fundamentals

Layout Cơ Bản

CSS Box Model

CSS Box Model

Hiểu rõ về CSS Box Model - nền tảng quan trọng nhất để layout và spacing trong CSS

Box Model Basics - Khái niệm cơ bản

CSS Box Model là cách trình duyệt tính toán kích thước và vị trí của mỗi element. Mỗi element được coi như một "hộp" với 4 phần:

📦 4 thành phần của Box Model:

  • Content: Nội dung thực tế (text, images)
  • Padding: Khoảng cách từ content đến border
  • Border: Đường viền bao quanh padding
  • Margin: Khoảng cách từ border ra ngoài

🧮 Cách tính kích thước:

  • Total Width: width + padding + border + margin
  • Total Height: height + padding + border + margin
  • Visible Width: width + padding + border
  • Visible Height: height + padding + border

⚠️ Lưu ý quan trọng:

  • • Margin không ảnh hưởng đến kích thước visible của element
  • • Margin có thể có giá trị âm (negative margin)
  • • Vertical margins có thể collapse (gộp lại)
  • • Box-sizing property thay đổi cách tính toán này

Box Model Visualization

/* Box Model Visualization */
.box-model-demo {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #3498db;
  margin: 15px;
  background-color: #ecf0f1;
  color: #2c3e50;
  text-align: center;
  line-height: 100px;
}

📦 Tóm tắt CSS Box Model

Box Model

Content, Padding, Border, Margin

Box Sizing

Content-box vs Border-box

Dimensions

Width, Height properties

Min/Max

Responsive constraints

Box Model là nền tảng của CSS layout - hiểu rõ nó sẽ giúp bạn tạo ra những layout chính xác và responsive! 🚀