HTML/CSS | Thẻ inline, block #2

• Hạn chế của thẻ Inline
• Giới thiệu về thẻ Inline-block

Hạn chế của thẻ Inline

Các thẻ Inline không hoạt động trên một số thuộc tính CSS liên quan tới cấu trúc như:

• padding-top, padding-botttom
• margin-top, margin-bottom
• width, min-width
• height, min-height

Cùng kiểm chứng nhé:

<p>Mẹ em có đôi mắt màu <span>xanh </span><em>rất đẹp</em></p>
<style>
 span {
    color: blue;
    padding-top: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    padding-left: 40px;
 }  
</style>

Thuộc tính padding được đặt cho cả 4 hướng, tuy nhiên chỉ có bên trái/phải hoạt động, bên trên/dưới vẫn được giữ nguyên.

Bạn hãy tự thay đổi code với các thuộc tính khác để có thêm trải nghiệm.

Giới thiệu về thẻ Inline-block 

Thẻ Inline-block là thẻ HTML có display: 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

Cùng tìm hiểu ví dụ:

<style>
.btn {
  display: inline-block;
  padding: 8px 20px;
  margin-top: 20px;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  background-color: #5ebbff;
}
</style>

 <a class="btn" href="#!">Học thử</a>

Thẻ <a> là thẻ Inline. Nếu không set thuộc tính display: inline-block, thuộc tính padding-top, padding-bottom và margin-top sẽ không hoạt động với .btn.

Comment dòng số 3 lại để xem sự thay đổi.