HTML节元素之间的间隙[重复]

<section class=“top”>
<DIV class=“wrapper”>
<h2>顶部部分</h2>
&L/DIV & GT;
</section>
<section class=“middle”>
<DIV class=“wrapper”>
<h2>中间部分</h2>
&L/DIV & GT;
</section>
<section class=“lower”>
<DIV class=“wrapper”>
<h2>下部分</h2>
&L/DIV & GT;
</section>
< /代码> 

css(对于.wrapper>)-对于部分没有其他css


包装{
宽度:100%;
最大宽度:1170px;
保证金:0自动;
}
< /代码> 

结果是:



我没有任何ul->code>或任何其他标记,也没有当我检查每个部分时,是否有任何空白或填充显示。我正在使用引导程序,但我不认为这会弄乱各部分。


但是,如果我添加:


< Prime>代码> *{
溢出:自动;
}
< /代码> 

这样就可以解决问题,消除差距。


这么说来,我是否需要在我的css中用“nuke”去掉与sections元素之间的间隙?这会导致与我添加到每个部分的其他元素的问题吗?似乎很奇怪,我需要附加每个部分元素来补偿浏览器或引导程序的一些不稳定行为?我以前也从未见过这样的情况,当以这种方式使用部分元素时,所以我倾向于相信它可能是bootstrap messing with things.

4答




我不知道为什么会这样,但出于某种原因,有些<section>我正在处理的布局上的元素。

目前我有三个独立的部分:

<section class="top">
  <div class="wrapper">
    <h2>Top Section</h2>
    </div>
 </section>
 <section class="middle">
    <div class="wrapper">
      <h2>Middle Section</h2>
     </div>
  </section>
  <section class="lower">
     <div class="wrapper">
       <h2>Lower section</h2>
     </div>
  </section>


CSS(用于.wrapper)-没有其他的CSS用于section:

.wrapper {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}


这就是结果:



我没有ul's或其中的任何其他标记,或者当我检查每个部分时,是否显示任何边距或填充。我正在使用引导程序,但我不认为这会弄乱部分。

然而……如果我加上:

* {
  overflow: auto;
}


这样就可以解决问题,而且差距也就消失了。

这么说,我是不是需要拥有overflow: auto在我的CSS中“核”出与部分元素的间隙?这会导致与我添加到每个部分的其他元素的问题吗?似乎很奇怪我需要每个附加部分元素来补偿浏览器或引导程序的一些不稳定行为?我以前也没见过这个部分元素是这样的,所以我倾向于相信它可能是自举干扰了事情。