Hướng dẫn tuỳ biến phần tử với thuộc tính display

Author: Nhật

Nếu bạn đang học cơ bản về HTML, CSS thì chắc phải nghe qua về thuộc tính Block và Inline. Nếu bạn chưa nghe qua hoặc chưa hiểu về hai thuộc tính này thì mình sẽ nói cho các bạn nghe về hai thuộc tính này và tầm quan trọng của nó trong thiết kế bố cục, giao diện website với CSS.

  • Block: Các phần tử có thuộc tính block sẽ được hiện thị nằm một hàng. Ví dụ về thuộc tính block như các thẻ <div>, <ul>, <li>, các thẻ <h>,… Là các block.
  • Inline: Các phần tử có thuộc tính inline sẽ hiển thị trên cùng một hàng trên nội dung khác. Ví dụ như các thẻ <a>, <span>, <strong>,… Là các phần tử inline.

Vậy có giải phải nào để chuyển một tử từ inline sang block và ngược lại? Câu trả lời là sử dụng thuộc tính display.

Thuộc tính display có những giá trị cơ bản sau:

  • inline: Chuyển phần tử về hiển thị trên một hàng.
  • inline-block: Chuyển phần tử về hiển thị cùng một hàng nhưng phần tử đó vẫn thừa hưởng các đặc tính của block như có thể tùy chỉnh width, height, background,…
  • block: Chuyển phần tử về hiển thị kiểu block, hiển thị thành một hàng riêng.
  • list-item: Chuyển phần tử về hiển thị như một danh sách(list) để có thể sử dụng thuộc tính – list-style.
  • none: Hiểu đơn giản là ẩn phần tử đó đi không hiển thị nữa và cũng ẩn luôn những khoảng trốn mà phẩn tử sở hữu. Nếu bạn muốn ẩn phần tử đi mà vẫn để lại “dấu vết” thì có thể sử dụng visibility: hidden.

HTML:

<h3>Đưa các danh sách về dạng inline</h3>
<ul>
  <li class="inline">List Item 1</li>
  <li class="inline">List Item 3</li>
  <li class="inline">List Item 4</li>
  <li class="inline">List Item 5</li>
</ul>

<h3>Đưa các thẻ a về block</h3>
<a href="http://thachpham.com" class="block">Link 1</a>
<a href="http://thachpham.com" class="block">Link 1</a>
<a href="http://thachpham.com" class="block">Link 1</a>

<h3>Ẩn phần tử</h3>
<p class="none">Ở đây có văn bản nè pa.</p>

CSS:

.inline {
  display: inline;
}
.block {
  display: block;
  background: #e8e8e8;
  margin: 5px 0;
}
.none {
  display: none;
}

Như vậy, bạn đã có thể hiểu thêm display trong css, bạn nên nhớ là CSS luôn tồn tại một thuộc tính tên là display để thay đổi kiểu hiển thị phần tử là được. Chúc các bạn có thể hiểu rõ hơn về dislay vì trong thiết kế website có thể bạn sẽ gặp nó rất nhiều.