Hiểu nhanh về Sự khác biệt giữa Display inline , Display Block và Display inline-block
-
Display inline là gì ? Display Block là gì ? Display inline-block là gì ? Sự khác biệt Display Inline ,Display Block và Display inline-block là gì ? …. Đừng lo lắng trong bài viết ngày hôm nay mình sẽ giải đáp cho các bạn câu trả lời cho những câu hỏi trên nhé . Không vòng vo nữa chúng ta cùng khám phá bài viết này nào !
Display inline
Với display Inline 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 .
Các item có kiểu display này không thể set width và height.
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ể).
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 :
Các item có kiểu display: block sẽ set được width, height, margin, padding đầy đủ 4 hướng (top, bottom, right, left).
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.
Để hiểu hơn chúng ta có ví dụ sau :
