Display: inline-block
So với display: inline, sự khác biệt chính là display: inline-block cho phép thiết lập chiều rộng và chiều cao element.
Ngoài ra, với display: inline-block, margin/padding trên cùng và dưới cùng được cho phép, nhưng với display: inline thì không.
So với display: block, sự khác biệt chính là display: inline-block không thêm dấu ngắt dòng sau element, vì vậy element có thể nằm cạnh các element khác.
Ví dụ sau cho thấy sự khác nhau của display: display: inline, display: inline-block và display: block:
span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.c { display: block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; }
Sử dụng inline-block tạo Navigation Links
Một cách sử dụng phổ biến để sử dụng display: inline-block là hiển thị các mục trong danh sách theo chiều ngang thay vì chiều dọc. Ví dụ sau tạo navigation links:
.nav { background-color: yellow; list-style-type: none; text-align: center; padding: 0; margin: 0; } .nav li { display: inline-block; font-size: 20px; padding: 20px; }