Từ trong ra ngoài
Một hộp gồm vùng nội dung, padding (vùng đệm), border (đường viền) và margin (lề ngoài). Padding nằm giữa nội dung và viền; margin nằm ngoài viền, tạo khoảng cách với xung quanh.
width và height cần được đọc cùng box-sizing. Với content-box như mẫu dưới, chúng đặt chiều rộng và chiều cao vùng nội dung, chưa cộng đệm, viền hoặc lề. Các thuộc tính khung đang học không tự kế thừa cho phần tử con.
Tính chiều rộng qua viền
```css
.hop {
box-sizing: content-box;
width: 200px;
height: 40px;
padding: 10px;
border: 2px solid teal;
margin: 8px;
}
```
```html
<div class="hop">Nội dung <span>A</span></div>
```
Vùng nội dung rộng 200px; hai đệm trái–phải thêm 2 × 10 = 20px; hai viền thêm 2 × 2 = 4px. Chiều rộng qua viền là **224px**. Nếu tính thêm hai lề ngang 8px ở mỗi phía, tổng phần được tính là 224 + 16 = **240px**.
Tương tự, chiều cao qua viền là 40 + 20 + 4 = 64px. Không dùng phép cộng lề dọc này để khẳng định khoảng cách giữa hai hộp bất kì, vì cách bố trí lề còn tùy bố cục.
Đọc riêng từng phía
padding:4px 8px 12px 16px lần lượt đặt trên–phải–dưới–trái. margin:10px 20px đặt lề trên/dưới 10px, trái/phải 20px. Một giá trị đặt cho cả bốn phía; ba giá trị lần lượt là trên, trái/phải, dưới.
Nếu đổi mẫu sang box-sizing:border-box mà vẫn width:200px, chiều rộng qua viền là 200px. Nội dung còn 200 − 20 − 4 = 176px. Margin vẫn nằm ngoài width; cách tính này giúp nhận ra đang đo phần nào của hộp.
Bài luyện
Khoảng nằm giữa nội dung và đường viền là gì?
margin ở ngoài viền.
width là chiều rộng theo cách tính hộp.
border là chính đường viền.
Đúng. padding là vùng đệm phía trong viền.
Lời giải
Từ nội dung đi ra ngoài lần lượt gặp padding, border rồi margin. Vì vậy khoảng giữa nội dung và viền là padding; margin là lề ngoài viền.
Bài luyện
Mẫu content-box rộng 200px, đệm mỗi phía 10px, viền mỗi phía 2px. Chiều rộng qua viền, chưa tính margin, bằng bao nhiêu?
200px mới là vùng nội dung.
Đúng. 200 + 2×10 + 2×2 =224.
240px đã cộng thêm hai lề 8px của mẫu.
Cần cộng cả hai phía, không chỉ một phía.
Lời giải
Chiều rộng qua viền gồm nội dung 200px, đệm trái/phải 20px và viền trái/phải 4px. Tổng là 200 + 20 + 4 =224px; margin chưa được tính.
Bài luyện
padding:4px 8px 12px 16px đặt đệm bên trái bao nhiêu?
Đây là phía trên.
Đây là phía phải.
Đúng. Giá trị thứ tư là phía trái.
Đây là phía dưới.
Lời giải
Bốn giá trị đi theo thứ tự trên, phải, dưới, trái. Do đó đệm trái là giá trị cuối 16px.
Bài luyện
Đổi riêng box-sizing của mẫu sang border-box, vẫn width:200px và đệm/viền như cũ. Vùng nội dung rộng bao nhiêu?
Đúng. Trừ 20px đệm và 4px viền.
200px lúc này là chiều rộng qua viền.
224px là kết quả qua viền của content-box trước đó.
240px là kết quả có thêm lề của mẫu trước.
Lời giải
Với border-box, width:200px gồm nội dung, đệm và viền. Nội dung rộng 200 − 2×10 − 2×2 =176px. Margin nằm ngoài và không bị trừ vào vùng nội dung từ width này.
Đang học