Menu
I have a link with display set to inline-block, and next to it is a <div> with the same height. However, the <div> is somehow appearing offset downwards, and I'm not sure why.
Here's a jsFiddle: http://jsfiddle.net/2bWjx/1/
#stats (grey) is appearing lower down than a.sector one-letter.
#stats should be equally set (top and bottom at the same point) as a.sector one-letter.
I've been struggling with this for a while, and could use some help. Should be a simple fix!
Thanks for any help in advance!
417
Because you are using inline-block, any newline character or whitespace you have after the element and before another inline element, will be counted as a space. If you want the blocks to stack side by side like in your picture, your HTML would need to be like this.
To align things in the inline direction, use the properties which begin with justify- . Use justify-content to distribute space between grid tracks, and justify-items or justify-self to align items inside their grid area in the inline direction.
The display: inline-block Value Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
The vertical-align property defines the vertical alignment of an inline element. The "top" value aligns the top of the aligned subtree with the top of the line box. We must apply the vertical-align property to the "small-box" only to make it start at the top of the container.
You need to add vertical-align: top to whatever has display: inline-block.
See: http://jsfiddle.net/thirtydot/2bWjx/2/
The default vertical-align is baseline, which causes the problem you're seeing.
You can see the difference between the various possible values here: http://www.brunildo.org/test/inline-block.html
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
