📦9-CSS BOX SIZING

CSS Box Model là gì?

Chúng ta cần nhớ rằng, tất các các element trên trang web đều là các khối hình chữ nhật cho dù hiển thị trên giao diện có thể là một chấm tròn hay một hình bất kỳ nào khác.

Trong CSS, khái niệm Box model được nhắc đến khi thực hiện thiết kế và xây dựng bố cục.

Trong đó:

• content: Phần nội dung văn bản hoặc hình ảnh được hiển thị

• padding: Phần đệm trong suốt xung quanh phần nội dung và khoảng cách tới border

• border: Phần đường viền bao quanh đối tượng content và padding

• margin: Phần đệm trong xuốt bao phía ngoài cùng của đối tượng

Thuộc tính padding và border trong box model

Thuộc tính padding

Thuộc tính padding cho phép thiết lập vùng đệm từ đường viền (border) của đối tượng đang xét so với nội dung bên trong của nó.

Với CSS, chúng ta hoàn toàn có thể thiết lập khoảng cách cho các cạnh trên, dưới, trái, phải tùy ý.

CSS có các thuộc tính riêng để chỉ định thiết lập khoảng cách đó từng bên như sau:

• padding-top: Vùng đệm phía trên

• padding-bottom: Vùng đệm phía dưới

• padding-left: Vùng đệm phía bên trái

• padding-right: Vùng đệm phía bên phải

Giá trị của các thuộc tính này có thể là auto hoặc kích thước (đơn vị pt, em, rem,...) hoặc inherit (kế thừa từ thành phần chứa nó)

Cú pháp

element{  
    padding-left: value;  
    padding-right: value;  
    padding-top: value;  
    padding-bottom: value;  
} 

Ví dụ

Thuộc tính border

Là kiểu viết tắt của 3 thuộc tính ở trên là border-style, border-color, border-width. Cho phép thiết lập đường viền cho một đối tượng phần tử.

Cú pháp

element{  
    border: width style color;  
}  

Ví dụ: Bạn muốn đặt 1 đường viền có độ dày 2px, màu vàng và kiểu solid

Vấn đề thực tế và sự xuất hiện của box sizing

Khi thiết kế layout một trang web, chắc chắn sẽ có những lúc bạn tăng giảm padding của một element, hay thêm border cho nó đẹp hơn (theo thiết kế mới của designer chẳng hạn). Vấn đề phát sinh là khi bạn thực hiện các thay đổi trên, tổng chiều rộng của element sẽ thay đổi và làm cả layout bị xê dịch vì những thay đổi đó.

Hai khối Sidebar và Content khi không có padding

Khi set padding left, right cho khối sidebar ngay lập tức khối content bị đẩy xuống

Khi chúng ta thiết lập width và height cho một phần tử và có sử dụng padding, border thì khi đó width và height thực tế sẽ bao gồm cả độ rộng padding và border.

Vì vậy, để kiểm soát được width và height như mong muốn, CSS cung cấp thuộc tính box-sizing.

Thuộc tính box-sizing

Thuộc tính box-sizing là một thuộc tính sẽ giúp bạn có thể tính toán và làm chủ được kích thước của một phần tử dựa vào thuộc tính width và height đã được thiết lập cố định với phần tử. Hay nói cách khác, là bạn sẽ muốn thuộc tính width và height là kích thước đã bao gồm border và padding.

Khi set padding left, right cho khối sidebar và áp dụng box-sizing thì khối content không bị đẩy xuống dưới như ví dụ trên.

Cú pháp:

element{  
   box-sizing: value;  
} 

Trong đó value bao gồm:

• content-box : Giá trị mặc định, nghĩa là giá trị width và height chỉ áp dụng cho khu vực nội dung bên trong, không bao gồm padding, border và margin. (Mặc định)

• border-box : Khi thiết lập giá trị này, thì width và height sẽ bao gồm cho cả phần nội dung, padding và border nhưng không bao gồm margin. (khuyến khích ưu tiên sử dụng giá trị này)

• padding-box : Với giá trị này thì width và height chỉ bao gồm cho phần nội dung và padding, không bao gồm border và margin. (Chỉ có tác dụng với trình duyệt firefox)

Ví dụ 1:

Ví dụ 2: