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