Bài 23: Bố cục CSS – Thuộc tính display: inline-block

Thuộc tính display: inline-block

So với display: inline, điểm 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, margins/paddings top và bottom được coi trọng, 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 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:

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

Sử dụng inline-block để tạo 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 trong 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:

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