Liên hệ
css

Hiểu về mô hình hộp Box CSS

Tìm hiểu về Box CSS, phần tử HTML là các hộp có kích thước, vị trí xác định bởi thuộc tính margin, padding, border, width, height

Mô hình CSS Box

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 hộp box có các thành phần: 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 hộp 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
CSS BOX

Khi bạn thiết lập thuộc tính widthheight của phần tử CSS có nghĩa bạn thiết lập chiều rộng và 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

Vui lòng đăng ký ủng hộ kênh