Inline và Block trong CSS

Trong HTML và CSS, mỗi phần tử đều có cách hiển thị mặc định thông qua thuộc tính display.
Việc hiểu rõ sự khác nhau giữa inline, block, và inline-block sẽ giúp bạn:

• Kiểm soát bố cục trang web tốt hơn.
• Biết khi nào nên dùng inline, block hay inline-block.
• Tránh lỗi hiển thị khi kết hợp nhiều phần tử khác nhau.

Ngoài ra, các thuộc tính như display, opacity, visibility cũng ảnh hưởng trực tiếp đến việc phần tử xuất hiện (hay biến mất) trên trang web.

Inline và Block

Thẻ Block

• Luôn bắt đầu trên một hàng mới.
• Chiếm toàn bộ chiều ngang có thể (kéo dài hết dòng).
• Trình duyệt có thể thêm khoảng cách mặc định (margin) trên dưới.

<h1>Heading 1</h1>
<p>Đây là một đoạn văn bản.</p>
<div>Thẻ div mặc định là block</div>

Thẻ Inline

• Không xuống hàng mới, nằm chung hàng với phần tử khác.
• Kích thước phụ thuộc nội dung.
• Không áp dụng được các thuộc tính về chiều cao (height, padding-top, margin-bottom,...).

<p>
  Màu sắc:
  <span style="color:red">Đỏ</span>, <span style="color:green">Xanh lá</span>,
  <span style="color:blue">Xanh dương</span>
</p>

Inline-block

inline-block kết hợp ưu điểm của cả inline và block:

• Vẫn nằm trên cùng một dòng như inline.
• Hỗ trợ đầy đủ các thuộc tính kích thước (width, height, padding, margin).

Ví dụ so sánh:

<style>
  span.inline {
    display: inline;
    background: lightblue;
    height: 50px; /* không có tác dụng */
  }
  span.inline-block {
    display: inline-block;
    background: orange;
    height: 50px; /* có tác dụng */
    width: 80px;
  }
</style>

<p>
  <span class="inline">Inline</span>
  <span class="inline-block">Inline-block</span>
</p>

Kết quả: thẻ inline không thay đổi chiều cao, còn inline-block hiển thị đúng 50px.

Ứng dụng inline-block: Tạo button

Một ví dụ điển hình là tạo nút bấm (button) bằng thẻ <a>:

<style>
  a.btn {
    display: inline-block;
    background: green;
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    min-width: 80px;
    text-align: center;
  }
</style>

<a href="#!" class="btn">Xem chi tiết</a>
<a href="#!" class="btn">Mua ngay</a>

Các nút vừa nằm cùng dòng, vừa có thể chỉnh kích thước và padding.

Thuộc tính display

Thuộc tính display xác định cách phần tử hiển thị. Các giá trị phổ biến:

• block: xuống hàng, chiếm full chiều rộng.
• inline: nằm cùng dòng, không chỉnh được kích thước.
• inline-block: nằm cùng dòng, nhưng chỉnh kích thước được.
• none: ẩn hẳn khỏi giao diện và không chiếm chỗ.

<style>
  h1 {
    display: block;
  }
  h2 {
    display: inline;
  }
  h3 {
    display: inline-block;
  }
  h4 {
    display: none;
  }
</style>

<h1>Block</h1>
<h2>Inline</h2>
<h3>Inline-block</h3>
<h4>Ẩn</h4>

Thuộc tính opacity

• Điều chỉnh độ trong suốt của phần tử.
• Giá trị từ 0 (hoàn toàn trong suốt) đến 1 (hiển thị rõ).
• Ảnh hưởng cả nền, viền và nội dung bên trong.

<style>
  .box {
    width: 100px;
    height: 100px;
    background: orange;
    display: inline-block;
    margin: 8px;
  }
  .half {
    opacity: 0.5;
  }
  .invisible {
    opacity: 0;
  }
</style>

<div class="box">1</div>
<div class="box half">2</div>
<div class="box invisible">3</div>

Thuộc tính visibility

• visibility: visible (mặc định): phần tử hiển thị bình thường.
• visibility: hidden: phần tử bị ẩn nhưng vẫn chiếm không gian trên trang.

<style>
  p.hidden {
    visibility: hidden;
  }
</style>

<p>Đoạn 1</p>
<p class="hidden">Đoạn 2 (ẩn nhưng vẫn chiếm chỗ)</p>
<p>Đoạn 3</p>

So sánh display, opacity và visibility

• display: none: Ẩn khỏi giao diện
• opacity: 0: Ẩn khỏi giao diện, Chiếm không gian, Hỗ trợ animation, Tương tác được
• visibility: hidden: Ẩn khỏi giao diện, Chiếm không gian, Hỗ trợ animation

Kết luận