CSS Box Model

Giới thiệu về CSS Box Model

CSS Box Model là gì?

CSS Box Model là một khái niệm cơ bản trong CSS, quy định cách mà các phần tử HTML được cấu trúc và hiển thị trên trình duyệt. Box Model bao gồm các thành phần: Content, Padding, Border và Margin.

Các thành phần trong CSS Box Model

1. Content (Nội dung)

Là phần chứa nội dung của phần tử HTML, được xác định bởi width (chiều rộng) và height (chiều cao).

<div class="content-box">
  Nội dung của box.
</div>

.content-box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

2. Padding

Là khoảng cách giữa nội dung và đường viền, xác định bằng thuộc tính padding.

<div class="padding-box">
  Nội dung với padding.
</div>

.padding-box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  padding: 20px;
}

3. Border

Là đường viền xung quanh phần tử, xác định bằng thuộc tính border.

<div class="border-box">
  Nội dung với border.
</div>

.border-box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  padding: 20px;
  border: 2px solid black;
}

4. Margin

Là khoảng cách giữa đường viền của phần tử và các phần tử khác, xác định bằng thuộc tính margin.

<div class="margin-box">
  Nội dung với margin.
</div>

.margin-box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  padding: 20px;
  border: 2px solid black;
  margin: 20px;
}

Bài tập thực hành

1. Tạo một trang web đơn giản chứa một số phần tử HTML và áp dụng CSS Box Model để căn chỉnh chúng.

2. Thay đổi kích thước, màu sắc và kiểu border của các phần tử để thấy được sự ảnh hưởng của CSS Box Model.

3. Tạo một layout đơn giản sử dụng CSS Box Model để sắp xếp các phần tử trên trang theo ý muốn của bạn.