Khái niệm

display là một thuộc tính quan trọng trong CSS dùng để kiểm soát cấu trúc hiển thị của một khối, thường tồn tại dưới hai dạng sau:

• block :
• Thuộc tính này sẽ tạo ra hàng mới
• Chiếm hết không gian theo chiều ngang của hàng đó
• Không chấp nhận phần tử khác nằm cùng hàng
• Chiều cao của khối sẽ co dãn linh hoạt theo nội dung bên trong
• Tag ví dụ : div, p, h1 - h6, v.v....

• inline / inline-block :
• Thường sẽ nằm bên trong các tag văn bản khác
• Không thể can thiệp kích thước của khối.
• Tag ví dụ : span, a, img, v.v...

Cách sử dụng

ví dụ

HTML

//block
<p>Hello</p>

//inline-block
<p class="box">Say</p>
<p class="box">Hi</p>

CSS

.box{
  display:inline-block;
}

Kết quả

Trong ví dụ trên, Tag p có nội dung là Hello sẽ có display mặc định là block, do đó tag này sẽ chiếm nguyên hàng, còn 2 tag p tiếp theo, do đã can thiệp class để chuyển đổi lại thành inline-block, nên có thể nằm chung hàng với nhau.