Khái niệm Box Model trong CSS

Box Model trong CSS là một định dạng khung, hộp bao quang một thành phần nào đó. Trong CSS Box Model bao gồm: width, height, padding, margin, border và các tùy chọn khác nữa.

Width và height

Đây là hai thuộc tính qui định độ rộng, chiều cao của đối tượng:
Ví dụ:

Ngoài đơn vị px ra bạn cũng có thể sử dụng các đơn vị khác được qui định trong css cho trường hợp này, bạn có thể tham khảo đơn vị trong css

Ngoài ra bạn có thể sử dụng:

• max-width: Qui định chiều rộng tối đa cho một thành phần trong web.
• min-width: Qui định chiều rộng tối thiểu cho một thành phần trong web.
• max-height: Qui định chiều cao tối đa cho một thành phần trong web.
• min-height: Qui định chiều cao tối thiểu cho một thành phần trong web.

Bạn sử dụng các trường hợp trên cho thành phần mà bạn chư xác định được có chiều rộng là bạn nhiêu. Bạn cần giới hạn lại phòng khi tp đó rộng hay cao quá sẽ vỡ mất giao diện chúng ta.

Margin và padding

Margin: Canh lề đối tượng, thuộc tính này cho phép bạn qui định khoảng cách từ đối tượng đang xét ra phía bên ngoài nó. (xem hình trên)

Thuộc tính này có cấu trúc viết như sau:

Padding: Đây là vùng đệm, đối tượng này cho phép bạn qui định khoảng cách từ đối tượng đang xét với thành phần trong nó. (Xem hình trên)

Thuộc tính này có cấu trúc tương tự như margin:

Thuộc tính Border

Đây là một thành phần cũng khá quan trong trong một trang web, border trong css cho phép bạn qui định viền của đối tượng giúp trang trí, nhấn mạnh, đóng khung…

Cấu trúc border bao gồm:

• Border-width: Thành phần Border-width qui định độ lớn của viền, có các giá trị: thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels, cm…
• Border-color: Qui định màu sắc của viền.
• Border-style: Qui định kiểu viền ví dụ các style của border như sau:

Cú pháp của border:

Kết luận: Vậy là chúng ta đã tìm hiểu cơ bản về box model trong css. Mọi đóng góp vui lòng comment nha.
Các bạn nào chưa bao giờ đụng đến CSS thì làm bài tập sau sẽ rõ hơn về phần này.