box-sizing: content-box; /* default */
box-sizing: border-box; /* với đường viền và lề */
box-sizing: inherit; /* lấy giá trị từ cha của nó */
box-sizing: border-box; /* với đường viền và lề */
box-sizing: inherit; /* lấy giá trị từ cha của nó */
Content-box
Các thuộc tính width và height được đo chỉ bao gồm content chứ không bao gồm padding, border hoặc margin.
padding, border và margin sẽ nằm ngoài hộp => width, height không tính padding, margin, border
// Content box
◀︎──── 200px ────▶︎
┌───────────────────────────────────────────────────────┐
| |
| ┌───────────────────────────────────────┐ |
| | | |
| | ┌───────────────┐ | |
| Border| Padding | Content | | |
| | | | | |
| 5px | 10px | 200px | 10px | 5px |
|◀︎─────▶︎|◀︎─────────▶︎|◀︎─────────────▶︎|◀︎─────────▶︎|◀︎─────▶︎|
| | | | | |
| | └───────────────┘ | |
| | | |
| └───────────────────────────────────────┘ |
| |
└───────────────────────────────────────────────────────┘
border-box
Các thuộc tính width và height bao gồm padding và border, nhưng không bao gồm margin.
padding và border sẽ ở bên trong hộp => width, height tính cả padding + border
// Border box
◀︎──────────────────────── 200px ────────────────────────▶︎
┌───────────────────────────────────────────────────────┐
| |
| ┌───────────────────────────────────────┐ |
| | | |
| | ┌───────────────┐ | |
| Border| Padding | Content | | |
| | | | | |
| 5px | 10px | 170px | 10px | 5px |
|◀︎─────▶︎|◀︎─────────▶︎|◀︎─────────────▶︎|◀︎─────────▶︎|◀︎─────▶︎|
| | | | | |
| | └───────────────┘ | |
| | | |
| └───────────────────────────────────────┘ |
| |
└───────────────────────────────────────────────────────┘
0 nhận xét:
Post a Comment