Sự khác nhau giữa display: inline, block và inline-block

Ở bài viết này mình sẽ phân biệt ba kiểu hiển thị:

  • display: inline
  • display: block
  • display: inline-block

display: inline

Với kiểu này thì các item sẽ nằm trên cùng một dòng, ví dụ như <span> . Nếu các items vượt quá độ dài của dòng thì item sẽ xuống dòng mới

[external_link_head]

Các item có kiểu display này không thể set width và height.

[external_link offset=1]

Các inline item sẽ chỉ có thể điều chỉnh margin và padding left and right (top và bottom thì không thể). Sự khác nhau giữa display: inline, block và inline-block

display: block

Khác với kiểu display: inline thì các item có kiểu display: block luôn được xuống dòng và chiếm toàn bộ width nếu width không được set. Ví dụ sẽ là div

Sự khác nhau giữa display: inline, block và inline-block

Các item có kiểu display: block sẽ set được width, height, margin, padding đầy đủ 4 hướng (top, bottom, right, left).

[external_link offset=2]

display: inline-block

Kiểu display: inline-block sẽ được sắp xếp giống với kiểu display: inline, nghĩa là các items sẽ được xếp cùng nhau trên một dòng . Tuy nhiên các items sẽ có thuộc tính của display: block như là có set width, height, margin, padding đủ 4 hướng.

Sự khác nhau giữa display: inline, block và inline-block

Kiểu display này sẽ thường được sử dụng để tạo thanh navbar. [external_footer]

Rate this post
Xem thêm  Tải Phần Mềm Chơi Game Pc Trên Android Tốt Nhất Trên Máy Tính Windows

Bài viết liên quan

Để lại ý kiến của bạn:

Email của bạn sẽ không được hiển thị công khai.