CSS Box Model

Trong hướng dẫn tự học CSS này, bạn sẽ tìm hiểu về CSS Box Model. Hiểu làm thế nào các phần tử có thể trình bày trực quan trên trang web.

1. CSS Box Model là gì?

Mỗi phần tử có thể được hiển thị trên một trang web đều được bao quanh bởi một hoặc nhiều hộp hình chữ nhật.

CSS Box Model thường mô tả cách các hộp hình chữ nhật này được thiết lập trên một trang web.

Các hộp này có thể có các thuộc tính khác nhau và có thể tương tác với nhau theo các cách khác nhau, nhưng mỗi hộp đều có:

• Content area: Khu vực nội dung hiển thị (Text, Ảnh, Video…)
• Padding: Các vùng đệm (Khoảng cách trống giữa nội dung và đường viền)
• Border: Đường viền (Đường viền này có hoặc không có độ rộng)
• Margin area: Khu vực lề (Khoảng cách giữa border và các phần tử xung quanh)

Sơ đồ sau đây sẽ minh họa cho bạn thấy các thuộc tính:

• width
• height
• padding
• border
• margin

Đây là tất cả những thứ sẽ xác định một phần tử sẽ chiếm bao nhiêu không gian trên trang web.

Như đã giới thiệu ở trên, Padding là không gian trong suốt giữa nội dung của phần tử và đường viền của nó (hoặc cạnh của hộp, nếu nó không có đường viền).

Trong khi đó, margin là không gian trong suốt xung quanh đường viền, nó giữ khoảng cách từ đường viền đến các phần từ xung quanh khác.

Ngoài ra, nếu một phần tử có màu nền (background), nó sẽ hiển thị cả trên padding (vùng đệm) của nó.

Margin (vùng lề) luôn luôn trong suốt, nó không bị ảnh hưởng bởi màu nền của phần tử, tuy nhiên, nếu có một nền được đặt bên dưới nó thì thì chúng ta sẽ nhìn thấy màu nền đó (ví dụ như màu nền của phần tử cha chẳng hạn).

2. Chiều rộng và Chiều cao thực tế của phần tử trên website

Thông thường khi bạn thiết lập chiều rộng (width) và chiều cao (height) của một phần tử bằng các thuộc tính width và height trong CSS, thực tế bạn chỉ đang thiết lập chiều rộng và chiều cao của vùng nội dung (Content Area) của phần tử đó.

Chiều rộng và chiều cao thực tế của hộp phần tử phụ thuộc vào một số yếu tố khác nữa.

Không gian thực tế mà hộp của một phần tử có thể chiếm trên một trang web được tính như thế này:

2.1. Tổng chiều rộng của phần tử trong CSS bằng:

width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

2.2 Tổng chiều cao của phần tử trong CSS bằng:

height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Lưu ý: Nếu bạn không hiểu kích thước thật mà phần tử chiếm, thì khi CSS bạn chỉ tính toán kích thước width với height thì sẽ sai lệch ngay.

Cụ thể, bạn sẽ được tìm hiểu về từng thuộc tính CSS này một cách chi tiết trong các bài sau.

Bây giờ chúng ta hãy thử ví dụ sau để hiểu CSS Box Model thực sự hoạt động như thế nào:

Trong HTML:

<div>Phần tử DIV này sử dụng để minh họa CSS Box Model trong CSS. Kích thước thực tế của phần tử sẽ bao gồm cả các kích thước: Phần nội dung, Phần đệm, Phần đường viền và Phần lề.</div>
<div>Hãy sử dụng Ctrl + Shift + I và chọn chỉ vào 2 DIV này để thấy không gian thực sự mà phần tử đã chiếm lấy.</div>

Trong CSS:

div {
    width: 200px;
    height: 200px;
    padding: 15px;
    border: 10px solid red;
    margin: 20px;
    float: left;
}

Note: Thuộc tính float: left đơn giản là sử dụng để dồn các phần tử sang bên trái nếu còn đủ không gian.

Khi chạy trên trình duyệt chúng ta nhận được kết quả như thế này:

Sau khi chúng ta nhấn Ctrl + Shift + I và chọn chỉ vào phần tử thì sẽ thấy như thế này:

Kích thước trình duyệt hiển thị (phần nhìn thấy rõ ràng) là 250×250 là:

• Chiều rộng 200px + Phần đệm trái 15px + Phần đệm phải 15px + Đường viền trái 10px + Đường viền phải 10px = 250px
• Chiều cao 200px + Phần đệm trên 15px + Phần đệm dưới 15px + Đường viền trên 10px + Đường viền dưới 10px = 250px

Tuy nhiên, thực sự không gian mà phần tử này chiếm đang là 290 x 290 px (bao gồm cả phần phần màu cam nhạt ngoài cùng)

Như vậy, bài hướng dẫn tự học CSS này mình đã giúp bạn hiểu về CSS Box Model là gì, kích thước thật sự của phần tử khi hiển thị trên website.

Hãy thử thay đổi các thuộc tính để thực sự hiểu cách nó hoạt động, tương tác bạn nhé. Nắm rõ CSS Box Model thực sự rất quan trọng khi HỌC LẬP TRÌNH WEB đấy.

Học tiếp: Thiết lập kích thước trong CSS

Đọc thêm: CSS Table