![]() Awesome, right? However, with varying content, we need to add the property vertical-align: top to make sure everything is aligned to the top. A simple example will look like this: Īs you can see, display: inline-block helps us here to render three square gray boxes next to each other. Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc. This is where the magic value inline-block for the display property comes into play. Another problem is that if you have a floated list that will take up several rows (visually speaking) and the content is of varying height, you are in for a world of hurt. The problem when you have float in your CSS code is that you need to take some precaution to make the surrounding element to encompass the floated elements, and also to avoid following elements in the code to sneak up next to it. ![]() However, there is an alternative with display: inline-block. ![]() Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. CSS display: inline-block: why it rocks, and why it sucks Published on Wednesday, February 24, 2010
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |