Display: inline-block là gì
Khi chúng ta viết HTML và CSS thì mấy thuật ngữ như block, inline và inline-block có thể gây bối rối, nhưng chúng lại rất quan trọng nếu bạn muốn căn chỉnh bố cục trang! Lơ tơ mơ về mấy thứ căn bản này sẽ làm chúng ta cảm thấy cực kỳ vất vả khi muốn các vị trí trên trang đặt đúng nơi mình muốn. Hoặc ngay cả khi đặt được đúng vị trí rồi, có thể bạn vẫn lăn tăn không ổn, vì không hiểu rõ mình vừa làm điều gì. Bên dưới đây chúng ta sẽ xem các ví dụ về từng thuộc tính để có thể hiểu rõ hơn cách làm việc của chúng.
CSS display: inlineTôi sẽ sử dụng thẻ span để làm ví dụ, thẻ này có thuộc tính display mặc định là inline rồi nên chúng ta không phải viết CSS chuyển display cho nó, chỉ cần viết, rồi bật lên thông qua trình duyệt xem có điều gì xảy ra hay không? Để dễ nhìn hơn, tôi thêm màu đỏ cho văn bản được bao quanh thẻ span: Kết quả: không có điều gì đặc biệt xảy ra ở đây! CSS display: blockGiờ tôi sẽ chuyển display của span thành block, mã mẫu: Kết quả: giờ thì chúng ta thấy khác biệt rồi. Văn bản được bao quanh thẻ span đã chiếm một dòng riêng nó. Sở dĩ có điều này vì display block làm cho phần tử sở hữu dòng riêng chứ không nằm cùng dòng như inline. Điều này cũng tương tự thẻ như thẻ p, h2 tới h6 và li (ol, ul), chúng cũng chiếm dòng riêng. CSS display: inline-blockBây giờ tới phần cuối, khi span chuyển thành inline-block. Mã: Kết quả: rất giống với inline, đoạn văn bản nằm cùng dòng. Nhưng sự khác biệt bạn sẽ sớm biết. Giờ bạn thử thêm margin cho span có inline-block xem tình hình gì xảy ra. Ví dụ: Hệt như vậy (tức vẫn để margin là 30px), nhưng giờ bạn thử để span là inline thôi xem sao, mã mẫu: Kết quả khác biệt ở chỗ margin top và bottom. Khi display là inline-block thẻ có margin theo đủ bốn hướng (left, right, top, bottom), còn khi là inline, thẻ chỉ có margin theo hai hướng là left và right. Bạn sẽ thấy sự khác biệt rõ nét hơn nữa khi gắn thêm chiều rộng, chiều cao, và màu nền cho thẻ span với 2 thuộc tính khác nhau này. Ví dụ với inline, không đem lại bất kỳ thay đổi nào: Còn inline-block tạo thành khối (block của riêng nó) dù nó vẫn nằm chung dòng cùng với các văn bản khác: Giờ chúng ta cũng làm vậy nhưng ốp vào thuộc tính block xem sao: Kết quả: span lúc này như vùng tự trị tách riêng hẳn dòng của nó, với khối có kích cỡ, màu và lề như chỉ định. Kết luận
|