Posted under CSS
Permalink
Tags CSS, Gotcha, HTML, inline-block, Tip, Tutorial
Update 18/1/2012
I was having trouble getting cross theme and cross browser consistency in aligning text adjacent to an icon in a series of IconTextButtons of mine, inside a toolbar.
Both the icon and the text were in spans set to display:inline-block and the spans were inside a div. I found the following useful in solving the issue :-
- The key issue turned out to be that the line-height was very different across Primefaces themes. The font size was constant at about (effectively) 11.5px, but the effective line-height varied with the them between 12px and 16px. This was the main cause of the issue in getting good alignment.
- I just set a fixed line-height of 14px for all the buttons in the toolbar, and this solved the cross theme (and cross browser) issues.
- The text was to the right of the icon, and found that tweaking the top margin for the icon set the position of both it and the text vertically, due to the adjacency-relative way in which vertical-align works.
- In order to adjust the vertical alignment of the text slightly relative to the icon, I found that setting a small bottom margin on the text achieved this, so one to bear in mind when experimenting.
- I had also tried padding changes as well as margin, but the effects (or lack of them) were similar to tweaking the margins.
Original Post
This post gives a good description of the effect on margins and padding for inline vs. block elements elements.
This StackOverflow post point out the effect of adjacent inline elements on the vertical alignment of an element – in this case an element was pushed down a few pixels due to the prescence of adjacent inline elements.
I was trying to align text and buttons in a narrow vertical toolbar, and as I have found previously, different browsers render differently.
The best consistency across browsers was obtained as follows :-
- Use display:inline-block to allow vertical margins to be obeyed on the elements. They can then be precisely adjusted (but may still behave differently depending on the adjacent elements). inline-block has decent cross browser support. IE6 and IE7 only support it on elements with a native type of ‘inline’ – see this post for cross browser support details.
- Using vertical-align:bottom seems to give the best cross browser consistency.
- Top and/or bottom margins generally need to be tweaked for each individual case depending on element adjacency. (Depending on the case you may need to set a top or a bottom margin to have the desired effect consistently across browsers.) For example, I had to treat a text only span differently to a text span adjacent to a couple of buttons on the bar.
Leave a Reply
You must be logged in to post a comment.