Mục lục

Hướng dẫn tìm hiểu về css display inline-block.

Xếp hạng bài viết này

Css display inline-block là một trong những từ khóa được search nhiều nhất trên google về chủ đề css display inline-block. Trong bài viết này, lamweb.vn sẽ viết bài viết Hướng dẫn tìm hiểu về css display inline-block..

Mục lục

Hướng dẫn tìm hiểu về css display inline-block.

Sự không giống nhau giữa display: inline, block và inline-block

1535766654 Lamweb.vn

Ở 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 thể loạiví dụ giống như . Nếu các items vượt quá độ dài của dạng thì item sẽ xuống loại mới

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

Các inline item sẽ chỉ đủ nội lực điều chỉnh margin và padding left and right (top và bottom thì không thể).

0ccb7868 0ce4 4958 9d43 5107606958e0 Lamweb.vn

display: block

không giống 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 tất cả width nếu width không được set. ví dụ sẽ là div

63bfa5de e8ab 4b1f aa69 dd87cf2981c3 Lamweb.vn

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

display: inline-block

Kiểu display: inline-block sẽ được bố trí 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 loại . tuy nhiên các items sẽ có thuộc tính của display: block giống như là có set width, height, margin, padding đủ 4 hướng.

banner techtalk jpg 20191113095256 Lamweb.vn

ef10c47b 0df3 4943 a50d 44a8c7993aaa Lamweb.vn

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

Nguồn: internet.com

Leave a Comment

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Please select listing to show.