Question

我有2个div彼此相邻，它们之间有一个空格，即使它们的边距设置为0.我也不希望空间在那里。空间由2个div标签之间的空白区域创建。我想知道在使用css进行样式设计时是否有办法忽略标签之间的空白区域？感谢。

＆＃13;

div {
    width: 100px;
    height: 100px;
    background-color: red;
    border: 1px solid black;
    display: inline-block;
    margin: 0px;
    font-size: 0px;
}

＆＃13;

<div></div> <div></div>

＆＃13;

Answer 1

您可以将祖先的字体大小设置为0 ...

.parent {
    font-size: 0;
}

div {
    width: 100px;
    height: 100px;
    background-color: red;
    border: 1px solid black;
    display: inline-block;
    margin: 0px;
    font-size: 0px;
}

<span class="parent">
    <div></div> <div></div> 
</span>

Answer 2

不是我所知道的CSS，但您可以通过在它们之间添加注释来删除HTML中的空白。

<div>
</div><!--
--><div>
</div>

这是有效的，因为在呈现页面时会忽略comment标记内的所有内容。

Answer 3

因为您正在使用display: inline-block;，这会使空白显着。要么摆脱空白，要么摆脱内联显示类型。

您也可以使用花车。

＆＃13;

div {
    width: 100px;
    height: 100px;
    background-color: red;
    border: 1px solid black;
    /*display: inline-block;*/
    margin: 0px;
    font-size: 0px;
    float: left;
}

＆＃13;

<div></div> <div></div>

＆＃13;

如何忽略标签，CSS，PHP之间的空格

3 个答案: