使用内联表或内联块时的额外边距为 5px [重复]答案

【问题标题】：Additional margin of 5px when inline-table or inline block is used [duplicate]使用内联表或内联块时的额外边距为 5px [重复]
【发布时间】：2013-02-20 05:39:04
【问题描述】：

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 就不会级联到孩子。

谢谢斯里坎特

【问题讨论】：

没有一个适合你的答案？

标签： html css

【解决方案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 元素之间发生了不需要的间距，并且您不希望您的源代码看起来像一个巨大的连续句子，那么您可以使用 cmets .

<ul>
    <li>a</li><!--
    --><li>b</li>
</ul>

【讨论】：

我可能对垂直对齐不太熟悉能否解释一下为什么我们需要这样做？
我已经为你添加了一个简短的解释。
它的工作！非常感谢！

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：