Question

http://jsfiddle.net/xarq5/

 <div id="hello">
      <ul>
          <li>Hello</li>
          <li>Hello</li>
      </ul>
 </div>

以上html的css

  #hello{
     margin:0px;
     padding:0px;
     border:1px solid black;
     float:left;
  }
  #hello ul{
      position:relative;
      display: inline-block;
      list-style:none;
      margin:0px;
      padding:0px;
  } 
  #hello li{
       float:left;
  }

对于上面的html和css，我总是为ul元素获得额外的5px余量。

在仔细检查我的代码中的每个css语句并编写上面的示例后，我能够发现问题是由于

    display:inline-block;
    or
    display:inline-table;

有什么方法可以解决这个问题？

其他一些论坛建议使用

“设置font-size：0;对于父容器和font-size：your_size;对于孩子。”

是否有任何其他解决方案可以防止这种情况发生，因此我的字体大小0不会级联到子级。

谢谢 SRIKANTH

Answer 1

将vertical-align: middle;添加到#hello ul将消除底部不受欢迎的“填充”。

http://jsfiddle.net/xarq5/1/

默认的垂直对齐通常是baseline，它指的是没有下行符的字母的下边缘（“a”或“B”没有下行符，但是“y”或“g” “做）。下面的小提琴使得不希望的“填充”来自哪里更加明显。它根本不是填充，而是为文本的下行保留空间。

http://jsfiddle.net/xarq5/11/

p {
    border: 1px solid;
}

p.aligned img {
    vertical-align: text-bottom;
}

<p>Something texty <img src="http://placehold.it/50x50" /></p>

<p class="aligned">Something texty <img src="http://placehold.it/50x50" /></p>

如果问题是 inline-block / inline-table元素之间发生的间隔，并且你不希望你的源看起来像一个巨大的连续句子，那么你可以使用注释

<ul> <li>a</li><li>b</li> </ul>

Answer 2

尝试http://jsfiddle.net/xarq5/10/

#hello{
    float: left;
}

和

#hello ul {
    float: left
}

解释：只要你有一个包含其他浮动元素的html元素，包含元素就不会完全“包含”浮动元素，除非它自己浮动..

注意：与this不同，您可以保持html缩进（即不要担心间距或缺少间距）：

<body>   
    <div id="hello">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
</body>

Answer 3

如果您不想要任何空间，请确保将li设置为没有边距或填充。尝试将其设置为inline。

Answer 4

您还可以将display: block;设置为ul元素集display: inline-block;到li元素。

使用内联表或内联块时的额外页边距为5px

4 个答案: