Question

主要编辑：原来我的问题在这里没有重复完全相同。使用bootstrap时出现问题，使用margin:0px;时未修复。有关持久性问题，请参阅更新的代码。

我正在构建一个有序的文本列表，并注意到一个小问题。当我将其他元素嵌套在li元素中时，我会在不受边距或填充控制的各个元素之间获得大量额外的空白。在这些元素上添加边框会发现每个嵌套元素都不能控制那个空格（看似）。

我的问题是如何控制额外空白量？

此问题的演示：

＆＃13;

#questionList li {
  font-size: 3em;
  margin-left: 3em;
}
#questionList li h2 {
  border: 1px solid red;
  font-size: 45px;
  margin:0px;
}
#questionList li small {
  border: 1px solid red;
  font-size: 14.72px;
  margin:0px;
}
#questionList li p {
  border: 1px solid red;
  font-size: 16px;
  margin:0px;
}

＆＃13;

<link href="http://bootswatch.com/paper/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <ol id="questionList" class="col-sm-8 col-sm-offset-2">
      <li>
        <h2>Qg</h2>
        <small>sub header</small>
        <p>P1</p>
      </li>
      <li></li>
      <li></li>
    </ol>
  </div>
</div>

＆＃13;

Answer 1

如果我们将每个边距设置为等于零，则段落和标题确实具有默认边距，如下所示。

＆＃13;

ol li h2 {
  border: 1px solid red;
}
ol li small {
  border: 1px solid red;
}
ol li p {
  border: 1px solid red;
}
h2,
p {
  margin: 0;
}

＆＃13;

<ol>
  <li>
    <h2>
      Header
    </h2>
    <small>
      Sub header
    </small>
    <p>
      paragraph of text
    </p>
  </li>
  <li>
    <h2>
      Header2
    </h2>
    <small>
      Sub header2
    </small>
    <p>
      paragraph of text2
    </p>
  </li>
</ol>

＆＃13;

Answer 2

这确实受到各个元素边际的控制。

这里举例说明：https://jsfiddle.net/25f3bcwr/

ol li h2 {
  border: 1px solid red;
  margin:0px;
}
ol li small {
  border: 1px solid red;
  margin:0px;
}
ol li p {
  border: 1px solid red;
  margin:0px;
}

Answer 3

这是因为如果未定义标题，默认情况下它们具有一些默认特征，例如它们的大小，间距，字体粗细。

我相信，那些不是空格使用 创建空格。

尝试使用display:inline-block;或display:inline;，然后使用css样式中的广告符号行，然后在句子末尾添加折线代码<br>看一些差异

 ol li h2 {
 border: 1px solid red;
 display: inline;
  
 }
 ol li small {
 border: 1px solid red;
 display: inline;
  
 }
 ol li p {
 border: 1px solid red;
 display: inline;
 }

      <ol>
         <li>
             <h2>
             Header
             </h2><br>
     <small>
       Sub header
     </small><br>
              <p>
              paragraph of text
              </p>
     </li>
          <li>
              <h2>
              Header2
              </h2><br>
        <small>
          Sub header2
        </small><br>
             <p>
             paragraph of text2
             </p>
      </li>
    </ol>

结果

内部列表后h2后的额外空白区域

3 个答案: