Box Model trong CSS
Mọi phần tử HTML đều có thể được coi là boxes (hộp). Trong CSS, thuật ngữ “box model” được sử dụng khi nói về thiết kế và bố cục. CSS box model hiểu nôm na là hộp bao quanh mỗi phần tử HTML. Nó bao gồm margin, đường viền, padding và nội dung phần tử. ...
Mọi phần tử HTML đều có thể được coi là boxes (hộp). Trong CSS, thuật ngữ “box model” được sử dụng khi nói về thiết kế và bố cục.
CSS box model hiểu nôm na là hộp bao quanh mỗi phần tử HTML. Nó bao gồm margin, đường viền, padding và nội dung phần tử. Hình ảnh dưới đây cho bạn cái nhìn cụ thể hơn về box model:
Giải thích từng thành phần:
- Content: nội dung trong hộp, chứa văn bản hoặc hình ảnh
- Padding: khoảng không gian bao quanh nội dung, có dạng transparent
- Border: đường viền xung quanh padding và content
- Margin: khoảng không gian bao quanh đường viền, có dạng transparent
Box model cho phép bạn thêm một đường viền bao quanh các phần tử để xác định khoảng không gian giữa các phần từ đó.
div {
awidth: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
Thuộc tính awidth và height của phần tử
Để thiết lập chiều rộng và chiều cao của một phần tử hiển thị chính xác trên mọi trình duyệt, bạn cần hiểu box model hoạt động như thế nào.
Chú ý: khi thiết lập thuộc tính awidth và height cho một phần tử với CSS, bạn phải đặt chiều rộng và chiều cao của vùng nội dung. Để tính toán đầy đủ kích thước của phần tử, bạn phải thêm padding, đường viền và margin.
Giả sử bạn muốn định dạng một phần tử <div> có tổng chiều rộng là 350px:
div {
awidth: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Đây là cách tính toán:
320px (awidth)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
Tổng chiều rộng của phần tử được tính toán như sau:
Tổng chiều rộng = chiều rộng + padding trái + padding phải + border trái + border phải + margin trái + margin phải
Tổng chiều cao của phần tử được tính toán như sau:
Tổng chiều cao = chiều cao + padding trên + padding dưới + border trên + border dưới + margin trên + margin dưới
Lưu ý cho phiên bản IE cũ: phiên bản IE8 trở về trước, bao gồm cả padding và border trong thuộc tính awidth. Để khắc phục vấn đề này, bạn thêm <!DOCTYPE html> vào trang HTML.
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
