Junior #display#layout#inline
Khác nhau giữa `display: block`, `inline` và `inline-block`?
⚡ Trả lời nhanh
block chiếm nguyên dòng và nhận width/height/margin đầy đủ. inline nằm trong dòng chữ, bỏ qua width/height và margin dọc. inline-block nằm trong dòng như inline nhưng vẫn nhận width, height, margin và padding như block.
| Thuộc tính | block | inline | inline-block |
|---|---|---|---|
| Xuống dòng mới | Có | Không | Không |
width/height | Có | Bỏ qua | Có |
| Margin/padding dọc | Có | Không ảnh hưởng layout | Có |
| Ví dụ mặc định | div, p | span, a | button, img (gần giống) |
.tag { display: inline-block; width: 80px; padding: 4px 8px; }