Extra line added :after pseudo-element when using HTML5 DTD (versus XHTML1) - css

Question

For a good long while I've been using a really nice column spanning method I stumbled across, wherein I can have a div with the class .boxcontainer and child .box elements, and using an :after pseudo-element on .boxcontainer, my .box columns justify nice and evenly across the page. Here are the all-important definitions:
.boxcontainer {
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
background-color: orange;
}
.boxcontainer:after {
content: '';
display: inline-block;
width: 100%;
height: 0px;
font-size: 0px;
line-height: 0px;
}
Most of my previous projects have been XHTML1 Transitional (which I have subsequently learned uses a limited quirks mode when compared to other DTDs), and using this method in XHTML1 the parent .boxcontainer always wrapped perfectly flush around the child .box elements.
However, working on a new project in HTML5, I've discovered that there appears to be an extra line added underneath the justified .box elements. You can see an example here: http://jsfiddle.net/RZQTM/1/ - click on Fiddle Options and change the DTD to just about anything else and you'll see what I mean - an orange 'band' appears underneath the justified blue boxes.
I think this is down to something in the :after pseudo-element being rendered almost like an additional line of content, but I have no idea how to fix it. Any tips on how to remove the extra space under the boxes would be most gratefully received.

Answer 1

The trick i use to make this extra line to vanish is to apply line-height:0; on parent ,
and reset line-height to 1.2em or whatever line-hight you had setted.
vertical-align:top;/* or bottom */ on :after elements ends up to swallow any vertical gaps left.
one exemple : http://codepen.io/gcyrillus/pen/dlvCp

Answer 2

A work around with extra markup and using CSS table-cells
I sometimes use the following. In the HTML, I add an extra element div.spacer:
<div class="boxcontainer">
<div class="box two">
<h3>This is the title</h3>
Lorem ipsum dolor amit ...</div>
<div class="spacer"></div>
<div class="box two">
<h3>This is the title</h3>
Lorem ipsum dolor amit ...</div>
<div class="spacer"></div>
<div class="box two">
<h3>This is the title</h3>
Lorem ipsum dolor amit ...</div>
<div class="spacer"></div>
<div class="box two">
<h3>This is the title</h3>
Lorem ipsum dolor amit ...</div>
</div>
For the CSS, I use display: table on the parent container and then display: table-cell on the .box child elements:
.boxcontainer {
background-color: orange;
display: table;
width: 100%;
}
.box {
vertical-align: top;
display: table-cell;
background-color: blue;
color: white;
font-family: Trebuchet MS;
}
The demo fiddle is: http://jsfiddle.net/audetwebdesign/xWfk2/
Internally, the CSS re-purposes the .spacer as sibling table-cells and the default spacing tends to be even because the .box elements have a fixed width.
This approach is ideal if the .spacer elements serve a useful purpose (have real content) and if you have other reasons to use table-cells, say vertical positioning control and so on.