Question

我正在使用这个css格式化两列，但我仍然在两个列之间获得边距。我可以使用margin-left: -4px;或其他一些消除它。有没有更优雅的方法来做这个或CSS代码有什么问题？

div.col1{
  display: inline-block;
  min-height: 900px;
  height: 100%;
  width 300px;
  margin: 0px;
  background-color: #272727;
  overflow: hidden;
  border: 1px dotted red;
}

div.col2{
  display: inline-block;
  min-height: 900px;
  height: 100%;

  width: 620px;
  margin: 0px;

  vertical-align: top;
  border: 1px dotted red;
  overflow: hidden;
}

Answer 1

也许你有：

<div class="col1">
    Stuff 1
</div>
<div class="col2">
    Stuff 2
</div>

？如果是这样，那么这可能是一个空白问题（事实证明，空格在html中很重要）。这应该解决它：

<div class="col1">
    Stuff 1
</div><div class="col2">
    Stuff 2
</div>

Answer 2

父元素的简单font-size:0将起作用。

Answer 3

具有属性inline-block的元素的行为就像它们是内联的（因此是名称），因此遇到的任何空格都将被视为空格。例如：

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

将以不同的方式呈现

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

See a live example here

您可以使用HTML解决此问题，如下所示：

将所有元素放在同一行，即

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

或使用HTML注释删除空格

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

您可以使用CSS解决此问题，如下所示：

在父项上设置属性font-size: 0，即

parent {
    display: inline-block;
    font-size: 0
}
parent * {
    font-size: 12px
}

或在父项上设置属性zoom: 1，即

parent {
    display: inline-block;
    zoom: 1
}

Answer 4

或者，要在不更改源代码格式的情况下解决此问题，您可以创建其他元素。

如果您在列表中执行此操作，它将如下所示：

<ul >
    <li>
      <a href="#">Solutions Overview</a>
    </li>       
</ul>   


<style type="text/css">             
    ul {word-spacing:-1em;}
    ul li a{word-spacing:0;}
</style>

Answer 5

此外，可以在此处找到一些有用的技术：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 6

应用float：left，这将删除空格，因此文本不必在1行。

Answer 7

制作父元素font-size: 0也将解决问题。

<div class="col-set">
    <div class="col1">
        Stuff 1
    </div>
    <div class="col2">
        Stuff 2
    </div>
</div>

.col-set { font-size: 0; }    
.col-set > div { font-size: 12px; }

Answer 8

您还应指定：

padding: 0;

如何删除内联块生成的额外边距空间？

8 个答案: