Kiến thức cơ bản css: inline vs block vs inline-block

CSS được tạo ra với mục đích định dạng kiểu trình bày cho html. Với những lý do đó các phần tử html được chia ra thành nhiều loại khác nhau trong CSS. Hai trong loại đó là các phần tử thuộc Inline (nội tuyến) và Block-level (cấp độ khối). Đây cũng là những kiến thức mà những nhà thiết kế web mới bắt đầu học cần nắm vững.

Block-level Elements – (Các phần tử cấp độ khối)

Các phần tử Block có những đặc tính mặc định như sau:

  • Nếu không có thông số xác định chiều rộng width, bề ngang của block sẽ tự động mở rộng cho đến giới hạn của phần tử bọc bên ngoài nó (parent container)
  • Có thể xác định thông số lề margins và vùng đệm padding
  • Nếu không có thông số xác định chiều cao height, block sẽ tự động mở rộng giới hạn bằng chiều cao các phần tử con (child element) của nó.
  • Khi đứng cạnh nhau, các block sẽ xếp chồng lên nhau.
  • Không thể sử dụng thuộc tính vertical-align

Như vậy, đối với phần tử thuộc block-level, bạn không cần phải thiết lập thông số width:100% , vì nó đây là thuộc tính mặc định. Tương tự, bạn cũng không cần dùng clear để các phần tử xuống hàng (xếp chồng lên nhau).

Xem ví dụ, các phần tử div xếp chồng lên nhau và có chiều ngang 100% khi đặt kế nhau, (chọn tab html để xem code html)

Một số phần tử html thuộc block-level: <p>, <div>, <form>, <header>, <nav>, <ul>, <li>, <h1>.

Inline elements – phần tử nội tuyến

Các phần tử Inline có những đặc tính mặc định như sau:

  • Luôn nằm trên một dòng chữ hay nội dung, không có thuộc tính mặc định clear
  • Sử dụng thuộc tính white-space như text trong CSS
  • Không áp dụng được thuộc tính margin-topmargin-bottom, nhưng vẫn áp dụng được margin-left , margin-right và đầy đủ thuộc tính padding
  • Không áp dụng được thuộc tính width and height
  • Nếu sử dụng thuộc tính float, các phần tử inline sẽ tự động trở thành block-level
  • Sử dụng thuộc vertical-align như text trong CSS

Hiểu một cách đơn giản nhất, các phần tử thuộc inline được CSS xem như các ký tự hoặc cụm chữ, do đó nó luôn nối tiếp trên một dòng nếu đặt cạnh nhau.

Xem ví dụ: Các phần tử được tạo bằng span, xếp trên cùng 1 dòng và có chiều rộng bằng với nội dung bên trong nó. (Chọn tab html để xem code html)

Một số phần tử thuộc inline: <a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code>.

Inline-Block elements – phần tử nội tuyến cấp độ khối

Đối với CSS, trong HTML không có bất cứ phần tử nào mặc định thuộc loại Inline-block, cơ bản các phần tử inline có thể chuyển đổi thành block-level thông qua thuộc tính display:block và ngược lại display:inline, do đó bất cứ phần tử nào cũng có thể chuyển thành loại inline-block thông qua thuộc tính display:inline-block . Inline-block là một định dạng đặc biệt, nó thuộc inline nhưng mang một số đặc tính của block.

  • Luôn nằm trên một dòng chữ hay nội dung như inline
  • Khi xếp cạnh nhau trên một dòng, có khoảng trắng mặc định giữa các phần tử
  • Sử dụng thuộc tính white-space như text trong CSS
  • Có thể áp dụng  đầy đủ thuộc tính margin và padding như block-level
  • Có thể áp dụng  đầy đủ thuộc tính width and height như block-level
  • Sử dụng thuộc vertical-align như text trong CSS

Xem ví dụ: Các phần tử div (block-level) nhưng có thuộc tính display:inline-block vẫn có thể xếp cạnh nhau như phần tử inline và có các đặc tính inline như khoảng trắng giữa các phần tử, chiều ngang bằng nội dung bên trong nó tuy nhiên nó có thể áp dụng được thông số width,height,padding, margin như block-level

Tóm lại, tùy theo ý đồ sử dụng các phần tử trong web layout, bạn có thể chọn phương pháp thích hợp để định dạng các phần tử thuộc loại inline, block hay inline-block. Cớ bản về web layout còn các thuộc tính quan trong khác thường dược sử dụng như như display:table, display:inline-table, display:inline-flex … và float. Chúng ta sẽ thảo luận và so sánh các phương pháp này trong một bài viết khác để giúp bạn chọn lựa phương pháp tối ưu khi tạo web layout.

Facebook Comments

Ý kiến của bạn

bình luận