I learned how to do these sort of things reading "PRO HTML and CSS Design Patterns". The display:block
is the default display value for the div
, but I like to make it explicit. The container has to be the right type; position
attribute is fixed
, relative
, or absolute
.
.stretchedToMargin {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
margin-bottom:20px;
margin-right:80px;
margin-left:80px;
background-color: green;
}
<div class="stretchedToMargin">
Hello, world
</div>
Fiddle by Nooshu's comment
Since this answer has become rather popular, I'm rewriting it significantly.
Let's not forget the actual question that was asked:
How to remove the space between inline-block elements? I was hoping
for a CSS solution that doesn't require the HTML source code to be
tampered with. Can this issue be solved with CSS alone?
It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.
The solution I had in my initial answer was to add font-size: 0
to the parent element, and then declare a sensible font-size
on the children.
http://jsfiddle.net/thirtydot/dGHFV/1361/
This works in recent versions of all modern browsers. It works in IE8. It does not work in Safari 5, but it does work in Safari 6. Safari 5 is nearly a dead browser (0.33%, August 2015).
Most of the possible issues with relative font sizes are not complicated to fix.
However, while this is a reasonable solution if you specifically need a CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).
This is what I, as a reasonably experienced web developer, actually do to solve this problem:
<p>
<span>Foo</span><span>Bar</span>
</p>
Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.
It's easy. It's simple. It works everywhere. It's the pragmatic solution.
You do sometimes have to carefully consider where whitespace will come from. Will appending another element with JavaScript add whitespace? No, not if you do it properly.
Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
You can do this, as I usually do:
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
http://jsfiddle.net/thirtydot/dGHFV/1362/
Or, this:
<ul>
<li>Item 1</li
><li>Item 2</li
><li>Item 3</li>
</ul>
Or, use comments:
<ul>
<li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li>
</ul>
Or, if you are using using PHP or similar:
<ul>
<li>Item 1</li><?
?><li>Item 2</li><?
?><li>Item 3</li>
</ul>
Or, you can even skip certain closing tags entirely (all browsers are fine with this):
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
Now that I've gone and bored you to death with "one thousand different ways to remove whitespace, by thirtydot", hopefully you've forgotten all about font-size: 0
.
Alternatively, you can now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Best Answer
1) This seems to be a rendering issue specific to Firefox. Setting the
vertical-align
property on the divs fixes it.top
,middle
, orbottom
all seem to work. I don't understand myself what FF is doing when there is aheight
but novertical-align
set; it might be a bug.2) The width and height are honored, but they are subject to table sizing rules. When a table does not have enough room to give each of the cells the width they have specified, it will give more room to cells that have more content. This is what was happening with your example. If you look at my example below, you will see that when the parent element is wider than the sum total of the table cells' widths, the cells respect the width. The height should always work (except in the case of the FF rendering issue I mentioned above).
3) Table cells don't have margins. Use border-spacing and display:table on a parent div.
http://jsfiddle.net/chad/k7esv/3/