Css 如何停止在浏览器中呈现内联块空白

粗略地说，试图构建一个四列布局，我得到了以下HTML：

<div>
    <div>A column</div>
    <div>A column</div>
    <div>A column</div>
    <div>A column</div>
</div>

---

->您可以使用问题中描述的float方法，但是您没有清除float，这就是容器崩溃的原因

一个好的方法是在容器元素的伪元素附件之后使用一个

：：来“自动清除”自身：


有没有。。。防止在使用display:inline块时在浏览器中呈现HTML空白的方法

是的，有几种方法。它们都不符合你的“无黑客”和“整洁”标准，但它们确实有效


重新格式化（“缩小”）代码，使其在元素之间没有任何空白。

这可能是最无黑客攻击和跨浏览器的解决方案。但它并不一定整洁，这意味着你正在通过调整HTML而不是CSS来修复布局，这并不理想。但它确实很有效。如果您希望保持代码可读性，可以使用HTML注释，这样您就可以保留空白，但不会将它们放在DOM中：

   <div>block 1</div><!--
--><div>block 2</div><!--
--><div>block 3</div>

块1块2块3

仍然不理想，但比大量的单行代码更具可读性

对于容器，将
字体大小设置为零，对于块，将其再次设置为全尺寸。

这真的很有效。这是一个纯粹的CSS解决方案，很容易做到。不利的一面是，如果你有相对的字体大小，就很难使用它（即设置回
14px
很好，但是设置为
1em
将不起作用，因为以前的字体大小为零的
1em
仍然是零）

设置
1em
负边距以缩小间隙。

这也很有效，但可能不精确


或者是否有一种替代内联块的方法可以使用，并且没有令人不快的副作用


总是有
浮动：left
。但这本身就有一系列不同的问题。如果您使用的是
内联块
，则可能性很大，因为您不想使用浮动

使用
position:absolute
并手动进行布局

您为这个大布局问题提供了几乎所有可能的解决方案。我只想指出我喜欢的解决方案

将父项的字体大小设置为0，然后使用REM再次重置。
如果父div（而不是子div）中没有其他文本，那么代码和布局就不会有问题

REM（相对EM）不是相对于父元素的字体大小（与普通EM一样），而是相对于文档的根元素--
html
元素

HTML:

<div class="parent">
    <div class="child">column 1</div>
    <div class="child">column 2</div>
    <div class="child">column 3</div>
    <div class="child">column 4</div>
</div>

html {
    font-size: 1em;
}

.parent {
    font-size: 0;
}

.child {
    display: inline-block;
    font-size: 16px; /* Add pixel-based font-size to support IE8 and below */
    font-size: 1rem; /* Don't use rem along with the font-shorthand to avoid problems in IE9/10 - see note below */
    width: 25%;
}

不支持浏览器：

<div class="parent">
    <div class="child">column 1</div>
    <div class="child">column 2</div>
    <div class="child">column 3</div>
    <div class="child">column 4</div>
</div>

html {
    font-size: 1em;
}

.parent {
    font-size: 0;
}

.child {
    display: inline-block;
    font-size: 16px; /* Add pixel-based font-size to support IE8 and below */
    font-size: 1rem; /* Don't use rem along with the font-shorthand to avoid problems in IE9/10 - see note below */
    width: 25%;
}


IE8及以下版本：添加基于像素的字体大小以使其正常工作
IE9/10：不使用
字体
-速记；请改用
字体大小

（Opera Mini和iOS 3.2）
当我看到你的“变通方法”时，我在想：你为什么不使用

然后我发现：


div{
背景：#ccc；
显示：表格；
宽度：100%；
}
div div{
背景：#eee；
显示：表格单元格；
宽度：25%
}

纵队
纵队
纵队
纵队
如果你真的想满足所有这些标准（跨浏览器、w3c兼容、非javascript、无黑客、整洁的HTML、防爆炸的方式）——不，没有。建议的解决方案，正如你所建议的那样，给块一个字体大小：0和元素你想要的字体大小，似乎是一个很好的解决方案：没有HTML奇怪的代码等等。。我会用that@audre7您或者需要依赖子div上基于像素的字体大小-这不好，或者使用IE8及以下版本不支持的相对EMs。（在我看来，依靠REMs将是这两个世界中最好的一个）打破标签带来的肮脏感觉是我见过的最接近清洁解决方案的东西。摆弄边距和字体大小可能会产生不良的副作用。删除空白没有（除了那种肮脏的感觉）；）@KyleSevenoaks：在他的问题中，他清楚地指出了为什么，他不想使用浮动和clearfix。如果你想了解更多关于clearfix方法的信息，请参阅。
 div:after {
    content: "";
    display: table;
    clear: both;
}

   <div>block 1</div><!--
--><div>block 2</div><!--
--><div>block 3</div>

<div class="parent">
    <div class="child">column 1</div>
    <div class="child">column 2</div>
    <div class="child">column 3</div>
    <div class="child">column 4</div>
</div>

html {
    font-size: 1em;
}

.parent {
    font-size: 0;
}

.child {
    display: inline-block;
    font-size: 16px; /* Add pixel-based font-size to support IE8 and below */
    font-size: 1rem; /* Don't use rem along with the font-shorthand to avoid problems in IE9/10 - see note below */
    width: 25%;
}