Display Inline trong CSS - Phần tử dòng

Khác với block, phần tử inline bắt đầu trên cùng dòng và chỉ chiếm chiều rộng cần thiết. Dưới đây là ví dụ triển khai display: inline.

Ví dụ 1: span inline vs p none

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

Kết quả

Ví dụ 2: span với id

<!DOCTYPE html>
<html>
<head>
<style>
span#demo {
  background-color: orange;
  color: white;
  display: inline;
}
</style>
</head>
<body>
<h1>Chi tiết trận đấu</h1>
<div>
  Trận đấu bắt đầu lúc <span id="demo">9AM</span> ngày 20 tháng 12.
</div>
</body>
</html>

Kết quả

Đặc điểm inline:

• Không ngắt dòng mới
• Chỉ chiếm chiều rộng nội dung
• Không set được width, height, margin-top/bottom
• Padding top/bottom hiển thị nhưng không đẩy phần tử khác
• Các thẻ mặc định inline: span, a, strong, em, img, input...