Tìm hiểu về Box CSS

[PVS]

Tìm hiểu về Box CSS

Các phần tử HTML được xem như các hộp chữ nhật (box), đây là mô hình để CSS dàn trang. Một box có các thành phần như: margin, border, padding, nội dung phần tử

CSS trình bày các thành phần margin, border, padding theo thứ tự top, right, bottom, left

Như vậy mọi phần tử trong web là các box, CSS sử dụng mô hình này để xác định độ lớn của box và box có vị trí như thế nào.

Các thuộc tính của Box - hộp trong CSS

• Liên quan đến margin có các thuộc tính: margin-top, margin-right, margin-bottom, margin-left
• Liên quan đến padding có các thuộc tính: padding-top, padding-right, padding-bottom, padding-left
• Liên quan đến kích thước vùng nội dung: width, height

​

Khi bạn thiết lập thuộc tính width và height của phần tử CSS có nghĩa là bạn đang thiết lập chiều rộng và chiều cao cho vùng nội dung.
Khi thiết lập background-color, nó tác động nên vùng nội dung và cả vùng padding.

Khi làm việc với các box, điều quan trọng cần biết tính tổng rộng và cao của phần tử.

Ví dụ với box có padding:
tổng chiều rộng = width + padding-left + padding-right

Ví dụ với box có cả margin, border, padding:
Tổng rộng = margin-left + margin-right + padding-left + padding-right + border-left + boder-right + width

Chúc các bạn thành công.

Nguồn: Internet​