CSS Box Model

The CSS Box Model
The CSS Box Model

Về cơ bản CSS Box Model là cái hộp bao quanh phần tử HTML  của chúng ta. Nó bao gồm margin, border, padding và content. Có thể xem, việc thiết kế bố cục của một trang web đơn giản là việc sắp xếp các Box Model này một cách hợp lý.

Nhắc lại một chút về phần tử HTML

Như các bạn đã biết, các tags HTML dùng để dánh dấu văn bản. Một số dùng cho các từ, các cụm từ. Trong khi một số khác dùng để dánh dấu các đoạn văn, các phần của văn bản. Do đó, cách chúng xuất hiện trên trình duyệt web cũng rất khác nhau.

Chúng ta đã được giới thiệu qua khái niệm block và inline. Đây là cách các phần tử HTML hiển thị trên trình duyệt web một cách mặc định. Đa phần, các phần tử sẽ xuất hiện bằng cách chồng lên nhau. Do đó, bạn có thể hình dung, mỗi phần tử HTML giống như một cái hộp. Và lúc này, trang web của chúng ta là một đống hộp chồng lên nhau.

Boxes

Và công việc của chúng ta khi xây dựng bố cục, chính là sắp xếp lại những cái hộp này. Điều chỉnh kích thước, vị trí của chúng, để có một giao diện đúng ý đồ của chúng ta. Nhưng chúng ta cần hiểu rõ cấu trúc của chúng trước khi muốn điều chỉnh phải không nào?

Hiểu hơn về Box Model

Bây giờ, chúng ta hãy cùng nhau tìm hiểu chi tiết về khái niệm Box Model trong CSS nhé.

Chi tiết các thành phần

Như hình vẽ ở đầu bài, cùng phần giới thiệu. Chắc chắc các bạn có thể dễ dàng nhận ra. Một box model gồm 4 thành phần chính.

  • Margin (lề): khoảng cách đến boxes cạnh nó
  • Border (đường viền): đường viên, ngăn cách padding và margin
  • Padding (phần đệm): Khoảng cách từ phần content đến border
  • Content (nội dung): Chứa nội dung bên trong. Một cách tường minh chính là nội dung của phần tử HTML

Sử dụng DevTools để kiểm soát box model

Để trong quá trình tìm hiểu về box model tường minh hơn, chúng ta hãy tận dụng sữ hỗ trợ của Devtools nhé.

Với một tài liệu HTML như sau:

Các bạn có thể mở file HTML để xem cách trình duyệt hiển thị. Ở tab mới, các bạn mở devtools của trình duyệt lên. Chọn tab Eements, ở khu vực chức năng bên tay phải, tiếp tục chọn tab Styles, kéo xuống dưới cùng các bạn đã nhận thấy box model của chúng ta chưa nào.

Khi các bạn chọn phần tử (phần gạch chân đỏ), box model sẽ hiển thị các thông tin về kích thước các thành phần (margin, padding và content) của phần tử đó.

Kích thước của box model

Với ví dụ cơ bản phía trên, khi một phần tử block không được khai báo chi tiết về kích thước. Nó sẽ chiếm trọn 100% chiều rộng. Bây giờ mình sẽ thử quy định lại. Kích thước của nó nhé (các bạn có thể tải file HTML phía trên của mình, và cùng thực hành thử nhé). Đầu tiên mình sẽ cập nhật lại class ‘box-1’

Và trang web của chúng ta đã thay đổi:

Devtools

Các bạn có thể thấy, box-1 đã nhỏ lại còn 400px. Phần box-model cũng ghi kích thước của nội dung bằng 400px. Khi sử dụng chức năng kiểm tra 1 phần tử, chúng ta cũng nhận được kết quả tương ứng.

Bây giờ, mình sẽ tiếp tục đặt kích thước cho margin, padding và border nhé.

Thực hiện lại thao tác như ở trên, chúng ta có:

Dễ dàng nhận thấy:

  • Chiều rộng của 1 box model = margin-left + border-left-width + content-width + border-right-width+ padding-right
  • Chiều cao của 1 box model = border-top-width + padding-top + content-height + padding-bottom + border-bottom-width

=> Với việc quy định kích thước như vậy. Chúng ta luôn kiểm soát được chiều rộng của phần nội dung. Tuy nhiên, khi thay đổi các thành phần padding hay border. Kích thước của model cũng có thể thay đổi làm sai lệch cấu trúc. Để tránh việc đó, mình sẽ thêm một thuộc tính mới vào rule css của chúng ta: box-sizing: border-box;

Và bây giờ kiểm tra phần tử box-1 của chúng ta:

Box Model

Box Model

Các bạn có thể thấy, kích thước của box model đã thay đổi. Tổng kích thước của chúng ta bây giờ là 400px. Đúng với khai báo của thuộc tính width. Khi sử dụng thuộc tính này. Chúng ta có thể cố định được kích thước của box model. Nhưng những thay đổi về padding và border có thể thu hẹp phạm vi hiển thị nội dung. Do đó, tùy như cầu chúng ta sẽ cân nhắc.

Kết luận về box-sizing

Để điều chỉnh cách tính kích thước của 1 box model. Chúng ta có thuộc tính box-sizing và 2 giá trị cần quan tâm:

  • content-box: giá trị mặc định của thuộc tính box-sizing. Khi sử dụng thuộc tính width khai báo chiều rộng của phần tử. Thì chiều rộng này chính là chiều rộng của vùng content. Tức là chưa tính border và padding
  • border-box: Khi sử dụng giá trị này. Kích thước của box model bao gồm border + padding + content

Các thuộc tính margin, padding và border

Bây giờ, chúng ta sẽ tìm hiểu và thử nghiệm các thuộc tính này nhé.

Margin

Để khai báo margin. Chúng ta có nhiều cách:

  • margin: 20px; Lúc này, các giá trị top, right, bottom và left đều được gán giá trị 20px
  • margin: 20px 10px; Lúc này, giá trị top, bottom bằng 20px; còn các giá trị left right sẽ có giá trị bằng 10px.
  • margin: 20px 10px 20px 10px; Lúc này, chúng ta gán giá trị riêng lẻ cho từng hướng với thứ tự là top – right – bottom – left (theo chiều quay của kim đồng hồ).
  • Ngoài ra, chúng ta có thể gán riêng lẻ giá trị padding từng hướng với các thuộc tính:
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left

Lưu ý khi sử dụng margin: Như các bạn đã biết, margin là khoảng cách giữa 2 phần tử.  Vậy chuyện gì xảy ra trong trường hợp này.

Khoảng cách giữa chúng là bao nhiêu? Các bạn có thể kiểm tra tại đây nhé. Ngoài ra, chúng ta có thể thu hẹp khoảng cách giữa 2 đối tượng bằng một giá trị margin âm. Với đoạn mã trên, bạn có thể thử thay thế giá trị margin-top của box thứ 2 thành -50px. Sau đó xem lại khoảng cách giữa chúng.

Padding

Để khai báo padding. Chúng ta có nhiều cách:

  • padding: 20px; Lúc này, các giá trị top, right, bottom và left đều được gán giá trị 20px
  • padding: 20px 10px; Lúc này, giá trị top, bottom bằng 20px; còn các giá trị left right sẽ có giá trị bằng 10px.
  • padding: 20px 10px 20px 10px; Lúc này, chúng ta gán giá trị riêng lẻ cho từng hướng với thứ tự là top – right – bottom – left (theo chiều quay của kim đồng hồ).
  • Ngoài ra, chúng ta có thể gán riêng lẻ giá trị padding từng hướng với các thuộc tính:
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left

Lưu ý: Không giống như margin. Giá trị padding sẽ không nhận 1 giá trị âm nhé.

Border

Thuộc tính border cho phép chúng ta đặc tả style, chiều rộng và màu sắc border của các phần tử. Cú pháp khai báo border:

border: border-width boder-style border-color;

Với đoạn mã CSS:

Chúng ta có thể kiểm tra kết quả đoạn mã CSS trên. Sau đó, các bạn có thể thay đổi giá trị border-style để hiểu rõ hơn.

Ngoài ra chúng ta có thể tùy chỉnh riểng lẻ các thuộc tính cơ bản bằng các thuộc tính CSS:

  • border-style: đặc tả style của border
  • border-width: đặc tả chiều rộng của border
  • border-color: đặc tả màu sắc của border
  • border sides: Chi tiết hơn, chúng ta có thể đặc tả 1 cạnh border tùy ý. Ví dụ:
    • border-top-width
    • border-top-style
    • border-top-color
  • border-radius: đặc tả độ cong của border