In this post we are going to learn a little bit about the different ways we can center HTML elements and handle vertical alignment with CSS.įirst we going to learn how to align text with CSS. We usually use HTML to define the markup and structure, while CSS helps us handle the styling and alignment of elements. If you stick the tags together with no blank space or carriage return between them, the inline-block works fine and the visible gap disappears.In the HTML and CSS world, it's all about the layout structure and the distribution of elements.
Div display table cell margin code#
It seems the browsers consider any carriage return embedded in the code as a blank character meant to be displayed as text (while it does not make much sense if you think about it, since such return characters are part of the structural glue of the code, not the visible content of the page). The elements are displayed next to each other with no separation. It works flawlessly in Chrome, Firefox and IE9. I solved this annoyance with a stupidly simple trick: simply avoid to place any space-like character (like the carriage return itself) between the consecutive tags, i.e.: Here are my two cents to remove the “sucks” part from the title: Thank you very much for your excellent explanation of this option. Posted in CSS, Developing, Technology, Web browsers So, the conclusion is that white-space dependent rendering blows! But, there are also great possibilities with display: inline-block, so I advise you to try it out, play around with it and see if it works fine in your specific context. Which sucks! Hard! However, if we were to place the LI elements directly after each other, they would all be rendered in the same line: That means, if we want perfect size and alignment, but we have space between the LI elements in our code example, it will render a 4 pixel margin to the right of each element.Ĭase in point, let’s make it more clear by giving the surrounding UL element a fixed width, wherein the LI elements should fit: Īs you can see, the third item will now fall down to the next row. That is, since the elements become rendered inline, white-space in your HTML code will affect the rendering. However, there’s one giant drawback, that might or might not apply to your use case. I hope so far that I have managed to get you to realize the potential and simplicity of this approach. Rendered results that will work in IE 7 too However, for older versions of Internet Explorer, we need to trigger hasLayout and also use a little hack to set the display to inline (note that this code could be in a separate stylesheet for IE, included via conditional comments – it’s inline here out of simplicity for this example): This will render just fine in Firefox, Safari, Google Chrome and IE 8.
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 kommentar(er)
