Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

CSS Display: Inline, Block, Inline-Block - So sánh chi tiết

Thuộc tính display quyết định cách phần tử hiển thị tương quan với các phần tử xung quanh. 3 giá trị phổ biến: inline, block, inline-block.

Cú pháp

display: inline;
display: block;
display: inline-block;

So sánh 3 giá trị

Inline

  • Hiển thị trên cùng dòng, không ngắt dòng.
  • Chỉ chiếm width cần thiết.
  • Bỏ qua width/height tùy chỉnh.
  • Các thẻ mặc định inline: <a>, <span>, <img>, <input>, <button>, <strong>, <em>, <br>...

Block

  • Hiển thị trên dòng mới, chiếm toàn bộ width khả dụng.
  • Tuân thủ width/height tùy chỉnh.
  • Các thẻ mặc định block: <div>, <p>, <h1>-<h6>, <section>, <article>, <ul>, <li>, <table>, <form>...

Inline-Block

  • Kết hợp ưu điểm: hiển thị inline (ngang hàng) VÀ chấp nhận width/height tùy chỉnh.
  • Lý tưởng khi muốn các phần tử ngang hàng nhưng vẫn kiểm soát kích thước.

Kết luận

Hiểu rõ inline, block, inline-block là nền tảng layout CSS. inline-block là cầu nối giữa hai thế giới. Xem thêm: "Learn CSS: A Guide to Learning Cascading Style Sheets" hoặc "Beginner's Guide to Learning CSS".