Display: Inline block - What is that space?
css, width
Solution
The space is in the HTML. There are several possible solutions. From best to worst:
- Remove the actual space in the HTML (ideally your server could do this for you when the file is served, or at least your input template could be spaced appropriately) http://jsfiddle.net/AWMMT/2/
- Use `float: left` instead of `display: inline-block`, but this has undesirable effects on t he height: http://jsfiddle.net/AWMMT/3/
- Set the container's `font-size` to 0 and set an appropriate `font-size` for the internal elements: http://jsfiddle.net/AWMMT/4/ -- this is pretty simple, but then you can't take advantage of relative font size rules on the internal elements (percentages, em)
Problem
Inline blocks have this weird space in-between them. I could live with it, up to a point where, if I load more content with an AJAX call, the tiny space goes away. I know I'm missing something here. ``` div { width: 100px; height: auto; border: 1px solid red; outline: 1px solid blue; margin: 0; padding: 0; display: inline-block; } ``` http://jsfiddle.net/AWMMT/ How to make the spacing consistent in Inline blocks?