Khóa học CSS - Bài 08 - Mô hình hộp

Quay về mục lục TỰ HỌC CSS

1. Mô hình hộp trong CSS

Mỗi phần tử HTML được xem như những chiếc hộp. Thuật ngữ “Mô hình hộp” thường được đề cập khi nhắc đến thiết kế layout.

Mô hình hộp trong CSS là 01 chiếc hộp bao xung quanh mỗi phần tử HTML. Nó bao gồm: margin, border, padding và dữ liệu thực. Sau đây là hình minh họa mô hình hộp:

Các phần margin, border và padding ta đã học trong các bài 04, 05 và 06.

Ví dụ:

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

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

Trong CSS, khi ta thiết lập width và height nghĩa là ta đang thiết lập cho vùng dữ liệu(content) mà thôi.

Kích thước thật sự của phần tử HTML bao gồm cả margin, padding và border (cộng thêm giá trị vào).

Ví dụ sau đây sẽ định dạng bề rộng của thẻ div tổng cộng 350px.

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

width + padding + border + margin

Trong đó:

padding-left + padding-right = 10px + 10px

border-left + border-right = 5px + 5px

margin-left = margin-right = 0px

Như vậy, ta có kết quả: 320px + 10px + 10px + 5px + 5px = 350px

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Quay về mục lục TỰ HỌC CSS

Tác giả: #drM

Nguồn : Sưu Tầm