Hiển thị Inline-Block bằng CSS

Phần tử được đặt với giá trị display: inline-block hiển thị như một container block cấp dòng (inline-level block container).

Ví dụ 1: Inline-block cơ bản

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-color: orange;
  color: white;
}
p.demo {
  display: inline-block;
}
</style>
</head>
<body>
<h1>Kết quả sinh viên</h1>
<div>
  Kết quả sinh viên MCA sẽ được công bố vào 
  <p class="demo">20 tháng 12 năm 2019</p>. 
  Kiểm tra trang web vào cùng ngày lúc 8PM.
</div>
</body>
</html>

Kết quả

Ví dụ 2: So sánh none vs inline-block

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-color: orange;
  color: white;
}
p.demo1 { display: none; }
p.demo2 { display: inline-block; }
</style>
</head>
<body>
<h1>Chi tiết trận đấu</h1>
<div>
  Trận đấu bắt đầu lúc 
  <p class="demo1">9AM</p> 10AM ngày 20 tháng 12.
</div>
<div>
  Trận đấu kết thúc lúc 
  <p class="demo2">5PM</p> ngày 20 tháng 12.
</div>
</body>
</html>

Kết quả

Đặc điểm inline-block:

• Hiển thị trên cùng dòng với các phần tử khác
• Chấp nhận width, height, margin, padding
• Khác với inline: không chấp nhận width/height
• Khác với block: không ngắt dòng mới