Leaderboard ads banner

Mô Hình Hộp CSS

Mô Hình Hộp CSS

Tất cả các phần tử HTML có thể được coi là hộp. Trong CSS, thuật ngữ "mô hình hộp" được sử dụng khi nói về thiết kế và bố cục.

Mô hình hộp CSS về cơ bản là một hộp bao bọc xung quanh mọi phần tử HTML. Nó bao gồm: lề, biên giới, đệm và nội dung thực tế. Hình ảnh dưới đây minh họa mô hình hộp:

enter image description here
Giải thích các trong mô hình hộp :

  • Nội dung - Nội dung của hộp, nơi văn bản và hình ảnh xuất hiện
  • Đệm - Xóa một vùng xung quanh nội dung. Phần đệm trong suốt
  • Đường viền - Đường viền bao quanh phần đệm và nội dung
  • Lề - Xóa một khu vực bên ngoài biên giới. Lề là minh bạch
    Mô hình hộp cho phép chúng tôi thêm đường viền xung quanh các phần tử và để xác định khoảng cách giữa các phần tử.

Ví dụ

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

Chiều Rộng Và Chiều Cao Của Một Phần Tử

Để thiết lập 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.

Quan trọng: Khi bạn đặt các thuộc tính chiều rộng và chiều cao của một phần tử có CSS, bạn chỉ cần đặt chiều rộng và chiều cao của vùng nội dung . Để tính toán kích thước đầy đủ của một phần tử, bạn cũng phải thêm phần đệm, đường viền và lề.

Giả sử chúng tôi muốn tạo kiểu cho phần tử <div> để có tổng chiều rộng là 350px:
Ví dụ :

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

Đây là tính toán :

320px (chiều rộng) + 20px (trái + phải) + 10px (trái + phải) + 0px (trái + lề phải) = 350px

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

  • Tổng chiều rộng của phần tử = chiều rộng + phần đệm trái + phần đệm phải + đường viền trái + đường viền phải + lề trái + lề phải

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

  • Tổng chiều cao của phần tử = chiều cao + phần đệm trên cùng + phần đệm đáy + đường viền trên cùng + đường viền dưới cùng + lề trên + lề dưới
Nội dung không được để trống

Hướng Dẫn Liên Quan