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
Ở bài viết này mình sẽ phân biệt ba kiểu hiển thị:
display: inlinedisplay: blockdisplay: 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ại, ví 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ể).
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
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.
Kiểu display này sẽ thường được sử dụng để tạo thanh navbar.
Nguồn: internet.com