Bố cục CSS - hiển thị: inline-block
Màn hình hiển thị: Giá trị khối nội tuyến
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 trên phần tử.
Ngoài ra, với
display: inline-block
, lề / đệm trên cùng và dưới cùng được tôn trọng, nhưng với display: inline
chúng 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 phần tử, vì vậy phần tử có thể nằm cạnh các phần tử khác.
Ví dụ sau đây cho thấy các hành vi khác nhau của display: inline
, display: inline-block
và display: block
:
Thí dụ
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 khối nội tuyến để tạo các liên kết điều hướng
Một cách sử dụng phổ biến display: inline-block
là hiển thị các mục danh sách theo chiều ngang thay vì chiều dọc. Ví dụ sau tạo liên kết điều hướng ngang:
Thí dụ
.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;
}