1.Mô hình hộp trong CSS là gì?

Trong CSS, thuật ngữ “mô hình hộp” được dùng để nói về việc thiết kế và bố cục của phần tử

Mô hình hộp trong CSS về có bản là một hộp bao quanh phần tử HTML. Nó bao gồm: margin, border, padding và phần content (nội dung)

Trong đó:

  • Nội dung(content)- Nội dung của phần tử, nơi văn bản và hình ảnh xuất hiện
  • Padding – Là một khu vực xung quanh nội dung, trong suốt và nằm trong border
  • Border- Là đường viền bao quanh phần padding và nội dung
  • Margin – Là một khu vực bên ngoài border và trong suốt

Mô hình hộp cho phép chúng ta thêm đường viền xung quanh các phần tử và xác định không gian giữa chúng

Ví dụ:

2.Chiều rộng và chiều cao của một phần tử

Để đặt chiều rộng và chiều cao của một phần tử một cách chính xác trong tất cả các trình duyệt, bạn cần biết cách hoạt động của mô hình hộp

Tổng chiều rộng của một phần tử sẽ được tính như sau:

Tổng chiều rộng phần tử = chiều rộng + margin bên trái + margin bên phải + border bên trái + border bên phải + padding trái + padding phải

Tổng chiều cao của một phần tử sẽ được tính như sau:

Tổng chiều cao của phần tử = chiều cao + margin trên cùng + margin dưới cùng + border trên + border dưới + padding trên + padding dưới

Ví dụ:

Ở đây, chiều rộng của phần tử là :

300px + 20px + 20px + 15px + 15px + 50px + 50px = 470px

chiều cao của phần tử là :

40px + 20px + 20px + 15px + 15px + 50px + 50px = 210px