使用伪类时避免 DOM 之间的空间 :before答案

【问题标题】：Avoid space between DOM when using pseudo class :before使用伪类时避免 DOM 之间的空间 :before
【发布时间】：2013-11-14 20:44:29
【问题描述】：

我一定是做错了一些基本的事情，因为我不希望下面每个字母之间有空格。

HTML：

<i class="icon icon1"></i>
<i class="icon icon2"></i>
<i class="icon icon3"></i>

CSS：

.icon {
    display: inline-block;
    position: relative;
    padding: 3px;
    background: yellow;
    margin: 0;
}

.icon1:before {
    content: "A";
}

.icon2:before {
    content: "B";
}

.icon3:before {
    content: "C";
}

链接： http://jsfiddle.net/qhoc/rkRBY/

我相信每个字符之间都会自动出现空格，除非font-size:0。我的要求是：

所有字符必须在同一行
会有更多icon4、icon5等。
在不改变字体大小的情况下，它们之间没有空格
可以添加 HTML 包装器，但不会触及 JS 或将 <i> 更改为其他内容。顺便说一下，我正在使用 Bootstrap。

如果有解决方法，请告诉我！谢谢。

【问题讨论】：

你想要这样吗？ link.
:before 是一个伪元素，不是一个伪类。

标签： html css twitter-bootstrap stylesheet

【解决方案1】：

元素之间有空间，所以，

<i class="icon icon1"></i><i class="icon icon2"></i><i class="icon icon3"></i>

演示：http://jsfiddle.net/rkRBY/10/

【讨论】：

好点。我不知道 linebreak 可以做大事。但是我用 Haml 编写了 HTML，它会自动为每个 DOM 创建一个新行。啊！！所以在某种程度上，我不能用这个。

【解决方案2】：

afaik 有两种好方法，

不要在 HTML 标记中的元素（或）之间留出空格
将display: table-cell 添加到该元素。

试试这个：

.icon {
    display: table-cell;
    /* removed padding: 3px; */
    position: relative;
    background: yellow;
    margin: 0px;
}

.icon1:before {
    content: "A";
}

.icon2:before {
    content: "B";
}

.icon3:before {
    content: "C";
}

Working Fiddle

【讨论】：

如果你有很多i，那么我建议你删除 HTML 中的空格，因为使用display: table-cell 可以将元素保持在同一行。
display: table-cell 与display: inline-block 在创建空间方面有何不同？只是好奇？！
@HP。即使我不知道.. 只是在设计网站时意识到 :)