Menu
Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides.
Top and bottom margins do not affect inline elements because inline elements flow with content on the page. You can set left and right margins/padding on an inline element but not top or bottom because it would disrupt the flow of content.
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.
White space affects inline elements.
This should not come as a surprise. We see it every day with span, strong and other inline elements. Set the font size to zero to remove the extra margin.
.container {
font-size: 0px;
letter-spacing: 0px;
word-spacing: 0px;
}
.container > div {
display: inline-block;
margin: 0px;
padding: 0px;
font-size: 15px;
letter-spacing: 1em;
word-spacing: 2em;
}
The example would then look like this.
<div class="container">
<div>First</div>
<div>Second</div>
</div>
A jsfiddle version of this. http://jsfiddle.net/QtDGJ/1/
The divs are treated as inline-elements. Just as a space or line-break between two spans would create a gap, it does between inline-blocks. You could either give them a negative margin or set word-spacing: -1; on the surrounding container.
A year later, stumbled across this question for a inline LI problem, but have found a great solution that may apply here.
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
vertical-align:bottom on all my LI elements fixed my "extra margin" problem in all browsers.
font-size: 0 to parent container
(Source: https://twitter.com/garand/status/183253526313566208)
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