Học HTML, CSS từ Zero Tới Hero

• Tìm hiểu thuộc tính display
• Các giá trị sử dụng phổ biến
• Giá trị display: block
• Giá trị display: inline
• Giá trị display: inline-block
• Giá trị display: none

Tìm hiểu thuộc tính display

Thuộc tính display được sử dụng để thể hiện cách một phần tử HTML được hiển thị trên trang web.

Cú pháp:

.blog {
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;
}

Các giá trị sử dụng phổ biến

Mọi phần tử đều có thuộc tính display mặc định. Vì vậy, các thẻ có display: inline là thẻ Inline, có display: block là thẻ Block.

Thuộc tính display có rất nhiều giá trị. Tuy nhiên, có 4 giá trị được sử dụng phổ biến: block, inline, inline-block, none.

Giá trị display: block

Block có nghĩa là khối.

Các thẻ có giá trị display: block là: <div>, <p>, <h1> tới <h6>, <ul>, <li>, v.v.

Các thẻ Block có các đặc điểm sau:

• Tạo ra một khoảng trống ở trên và dưới của nó, đẩy các phần tử khác ra khỏi cùng một hàng.
• Luôn bắt đầu trên một hàng mới.
• Chiều ngang mặc định thừa hưởng 100% từ thẻ cha chứa nó.

Ví dụ:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Hôm nay là một ngày đẹp trời</p>

Giá trị display: inline

Inline là nội tuyến, hiểu nôm na là cùng một dòng.

Các thẻ có display: inline thường là: <span>, <a>, <strong>, <em>, v.v.

Tính chất của thẻ có display: inline:

• Khi có nhiều thẻ Inline đứng cạnh nhau thì chúng sẽ nằm trên cùng một hàng.
• Chiều ngang bằng nội dung của nó.
• Không thể thiết lập width và height cho thẻ inline.

Ví dụ:

<p>
  Các màu sắc phổ biến:
  <span class="inline" style="color: red;">Đỏ</span>
  <span class="inline" style="color: green;">Xanh lá</span>
  <span class="inline" style="color: blue;">Xanh dương</span>
  <span class="inline" style="color: orange;">Cam</span>
</p>

Giá trị display: inline-block

Thẻ có thuộc tính display: inline-block chính là thẻ Inline-block, bao gồm các đặc điểm kết hợp giữa thẻ Inline và thẻ Block.

Đặc điểm của thẻ Inline-block:

• Nội dung sẽ nằm trong một hàng, nếu có nhiều thẻ Inline-block đứng cạnh nhau thì vẫn nằm trên một hàng.
• Có thể sử dụng các thuộc tính bị hạn chế ở thẻ Inline:
  • padding-top, padding-botttom
  • margin-top, margin-bottom
  • width, min-width
  • height, min-height

Giá trị display: none

Với giá trị display: none, phần tử sẽ được ẩn đi và không chiếm không gian ở trên trang web nữa.

Cùng xem video minh họa: