L布局 CSS - display: inline-block

display: inline-block

Với display: inline So với, sự 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ử.

相似, nếu thiết lập display: inline-block, sẽ giữ lại các biên mép ngoài/trong, trong khi đó display: inline sẽ không.

So với display: block, sự khác biệt chính là display: inline-block không thêm dòng mới sau phần tử, vì vậy phần tử đó có thể nằm bên cạnh các phần tử khác.

Dưới đây là ví dụ minh họa về cách display: inline, display: inline-block và display: block có hành vi khác nhau:

Mẫu

span.a {
  display: inline; /* 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; 
}

Thử ngay

Sử dụng inline-block để tạo liên kết định hướng

Một cách sử dụng phổ biến của display:inline-block Sử dụng để hiển thị các mục danh sách theo hướng ngang thay vì dọc. Ví dụ sau tạo ra một liên kết định hướng ngang:

Mẫu

.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;
}

Thử ngay