07/09/2018, 14:41

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.

Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • 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
0