Giải Thích CSS Box Model Và Các Thành Phần Cấu Thành

Question

Nguyệt Nguyễn · Accepted Answer

CSS Box Model là một khái niệm cơ bản trong thiết kế web, giúp xác định cách mà các phần tử được hiển thị và cách chúng tương tác với nhau trong một trang web. Việc hiểu rõ Box Model là rất quan trọng để tạo ra bố cục chính xác và dễ dàng điều chỉnh khoảng cách giữa các phần tử.
1. Định Nghĩa CSS Box Model
CSS Box Model là một mô hình hình học biểu diễn các phần tử HTML như các hình chữ nhật, trong đó mỗi phần tử được bao quanh bởi bốn thành phần: content, padding, border và margin. Mô hình này giúp quản lý kích thước, khoảng cách và cách mà các phần tử tương tác với nhau.
2. Các Thành Phần Cấu Thành
2.1. Content
Định nghĩa: Đây là nội dung thực tế của phần tử, như văn bản, hình ảnh hoặc bất kỳ loại dữ liệu nào khác.
Kích thước: Kích thước của content được xác định bởi thuộc tính width và height.
.content {
    width: 200px;
    height: 100px;
}
2.2. Padding
Định nghĩa: Padding là không gian giữa nội dung và viền (border) của phần tử. Nó tạo ra khoảng cách xung quanh nội dung bên trong phần tử.
Kích thước: Kích thước của padding có thể được thiết lập bằng cách sử dụng thuộc tính padding, với các giá trị cho từng bên: top, right, bottom, left.
.padding {
    padding: 20px; /* Padding đều cho tất cả các bên */
}
2.3. Border
Định nghĩa: Border là đường viền bao quanh padding và nội dung của phần tử. Nó có thể được điều chỉnh về màu sắc, kiểu dáng và độ dày.
Kích thước: Kích thước của border được thiết lập bằng các thuộc tính border-width, border-style, và border-color.
.border {
    border: 2px solid black; /* Viền 2px, màu đen, kiểu solid */
}
2.4. Margin
Định nghĩa: Margin là không gian ngoài viền của phần tử, tạo ra khoảng cách giữa phần tử này và các phần tử khác xung quanh nó.
Kích thước: Kích thước của margin có thể được thiết lập bằng cách sử dụng thuộc tính margin, với các giá trị cho từng bên: top, right, bottom, left.
.margin {
    margin: 15px; /* Margin đều cho tất cả các bên */
}
3. Cách Tính Kích Thước Tổng Của Phần Tử
Khi tính kích thước tổng của một phần tử, bạn cần cộng tất cả các thành phần lại với nhau:
Tổng chiều rộng = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
Tổng chiều cao = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
3.1. Ví dụ
Giả sử bạn có một phần tử với các thuộc tính sau:
.element {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}
Tính chiều rộng:Width: 200pxPadding: 20px (trái) + 20px (phải) = 40pxBorder: 2px (trái) + 2px (phải) = 4pxMargin: 10px (trái) + 10px (phải) = 20pxTổng chiều rộng = 200 + 40 + 4 + 20 = 264px
Tính chiều cao:Height: 100pxPadding: 20px (trên) + 20px (dưới) = 40pxBorder: 2px (trên) + 2px (dưới) = 4pxMargin: 10px (trên) + 10px (dưới) = 20pxTổng chiều cao = 100 + 40 + 4 + 20 = 164px