html - 居中行内 block 元素后的空白

Question

.calloutWrapper 
{
background: green;
height: 50%;

text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}

.callout {
width: 24%;
min-height: 100%;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
background-color: blue; }


.stretch {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
vertical-align: top;
}

http://jsfiddle.net/yux07nom/

蓝色背景的“标注”后有空白。这超出了“calloutWrapper”的绿色背景，我相信它是由应用于跨度的 .stretch 引起的。

Answer 1

首先，你关闭 body 两次，这不会导致你的问题，但应该得到解决

</body>
    <script>
    </script>
</body>

然后空白是由您的 .stretch 跨度引起的 display: inline-block; 是罪魁祸首

删除它，一切顺利。 有关您尝试通过该跨度实现的目标的更多信息可能有助于提供更好的答案。