Display None trong CSS - Ẩn phần tử hoàn toàn

Để ẩn phần tử hoàn toàn, sử dụng giá trị display: none trong CSS. Phần tử sẽ không được render và không chiếm diện tích.

Ví dụ 1: Ẩn đoạn văn, hiển thị span inline

<!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: Ẩn span bên trong đoạn văn

<!DOCTYPE html>
<html>
<head>
<style>
span { display: none; }
.demo2 {
  text-decoration: underline;
  text-decoration-style: double;
  text-decoration-color: red;
}
</style>
</head>
<body>
<h1>Chi tiết</h1>
<p class="demo">Trung tâm thi gần <span>XYZ College</span> ABC College.</p>
<p class="demo2">Kỳ thi bắt đầu lúc 11AM.</p>
</body>
</html>

Kết quả

So sánh display:none vs visibility:hidden:

Dùng display: none cho dropdown, modal, tab ẩn, responsive hide/show.