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

Có thể bạn sẽ thích…

2 phản hồi

  1. Nguyễn Thế Nhàn viết:

    Cảm ơn timoday.edu.vn đã chuyển tải những thông tin bổ ích cho mình trong quá trình tìm hiểu về html, css, php.

    Quá tuyệt

  2. Nguyễn Thế Nhàn viết:

    Cảm ơn timoday.edu.vn đã chuyển tải thông tin bổ ích
    Quá Tuyệt

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

EnglishFrenchJapaneseRussianVietnamese