Mô Hình Hộp CSS: Margin, Border, Padding & Nội Dung
Khi bạn thiết kế trang web bằng CSS, mỗi phần tử trên trang đều được coi là một hộp. Đây được gọi là mô hình hộp CSS, một khái niệm cơ bản xác định cách các phần tử được định kích thước, cách bố trí và tương tác với nhau. Dù bạn đang căn chỉnh văn bản, xây dựng bố cục hay xử lý các vấn đề về khoảng cách, việc hiểu rõ mô hình hộp là rất quan trọng.
Nội Dung Chính
Mô Hình Hộp CSS Là Gì?
Mỗi phần tử HTML thực chất là một hộp hình chữ nhật. Mô hình hộp giúp trình duyệt tính toán:
- Diện tích tổng cộng mà một phần tử chiếm giữ
- Cách các phần tử được định vị tương đối với nhau
- Ranh giới hiển thị của nội dung
Nó bao gồm bốn lớp (từ trong ra ngoài):
- Nội Dung → Khu vực bên trong nơi chứa văn bản, hình ảnh, hoặc nội dung khác.
- Padding → Khoảng cách giữa nội dung và biên.
- Border → Đường viền bao quanh padding và nội dung.
- Margin → Khoảng cách bên ngoài giữa phần tử và các phần tử lân cận.
Các Thành Phần Của Mô Hình Hộp
1. Nội Dung
Đây là phần quan trọng nhất của hộp – khu vực hiển thị văn bản, hình ảnh hoặc phương tiện khác. Các thuộc tính CSS về chiều rộng và chiều cao thường áp dụng cho hộp nội dung (trừ khi bạn thay đổi thuộc tính box-sizing).
Ví dụ:
css
div {
width: 200px;
height: 100px;
background-color: lightblue;
}2. Padding
Padding thêm không gian bên trong hộp, giữa nội dung và biên. Nó làm tăng diện tích nhấn hoặc chạm của các phần tử mà không làm ảnh hưởng đến biên hoặc margin.
Ví dụ:
css
div {
padding: 20px;
}Điều này làm cho khu vực nội dung cảm thấy rộng rãi hơn, nhưng cũng làm tăng kích thước tổng thể của phần tử (trừ khi box-sizing: border-box được sử dụng).
3. Border
Border bao quanh nội dung + padding. Các biên có thể có kiểu (đặc, gạch, chấm), độ dày và màu sắc.
Ví dụ:
css
div {
border: 3px solid navy;
}4. Margin
Margin tạo khoảng cách bên ngoài biên của phần tử, tách biệt nó với các phần tử lân cận. Khác với padding, margin không ảnh hưởng đến kích thước nội bộ của phần tử – chúng ảnh hưởng đến khoảng cách bố trí.
Ví dụ:
css
div {
margin: 30px;
}Margin cũng có thể được đặt là auto, điều này đặc biệt hữu ích cho việc căn giữa các phần tử theo chiều ngang.
css
div {
width: 300px;
margin: 0 auto;
}Tổng Hợp
Hãy tưởng tượng một <div> được định dạng như sau:
css
div {
width: 200px; /* Kích thước nội dung */
padding: 20px; /* Khoảng cách bên trong */
border: 5px solid; /* Độ dày biên */
margin: 10px; /* Khoảng cách bên ngoài */
}Tính Toán Tổng Chiều Rộng:
Nội Dung (200px)
+ Padding (20px trái + 20px phải = 40px)
+ Border (5px trái + 5px phải = 10px)
+ Margin (10px trái + 10px phải = 20px)
= 270pxTính Toán Tổng Chiều Cao (tương tự):
Nội Dung (100px nếu được đặt)
+ Padding (trên + dưới)
+ Border
+ MarginĐiều này giải thích tại sao đôi khi các phần tử trông "lớn hơn" so với chiều rộng mà bạn đã đặt rõ ràng.
Vai Trò Của box-sizing
Theo mặc định, chiều rộng và chiều cao trong CSS chỉ áp dụng cho hộp nội dung. Điều này có nghĩa là padding và biên sẽ thêm kích thước bổ sung.
Nếu bạn thích một cách tiếp cận trực quan hơn, bạn có thể sử dụng:
css
* {
box-sizing: border-box;
}Với border-box, chiều rộng đã khai báo bao gồm nội dung + padding + border, giúp quản lý bố cục dễ dàng hơn.
Kết Luận
Mô hình hộp CSS là nền tảng của bố cục web. Bằng cách hiểu rõ nội dung, padding, border và margin, bạn sẽ có thể:
- Kiểm soát khoảng cách một cách chính xác
- Tránh những thay đổi bố cục không mong muốn
- Tạo ra các thiết kế cân đối về mặt thị giác
Làm chủ khái niệm này, bạn sẽ giải quyết được 80% các vấn đề về khoảng cách CSS bí ẩn!
Hãy xem những video trên YouTube để có nội dung CSS tuyệt vời từ cơ bản đến nâng cao. Đừng quên đăng ký kênh YouTube của chúng tôi để làm rõ các khái niệm lập trình và nhiều nội dung khác nữa... CodenCloud.
