html - HR : margin-top won't work. 为什么？

Question

我需要在我的 hr 中添加一个 margin-top(可以在 Quem Somos 部分看到)。我已经尝试了一切，但无法让它发挥作用。我试过在 div 中添加 hr，然后将 margin-top 应用到这个 div，但是没有也不行。我想让这个 hr 上下的空间相等。

你能帮我吗？

直播:http://baskra.com/teste/teste.html

HTML:

<div class="row">
<div class="quem-somos">
  <a id="quem"></a>

  <h1 class="quem-somos-title">QUEM SOMOS?</h1>
  <h1 class="quem-somos-subtitle">VOCÊ COM CERTEZA JÁ OUVIU FALAR DAS FAMOSAS FÓRMULAS DE BHASKARA.</h1>

  <div class="quem-somos-content-1">

A equação completa de segundo grau agora pode ter mais sentido do que nunca. Pelo menos foi assim para a gente. Aprendemos a enxergar resultados claros e perfeitamente desenhados em cada problemática que analisávamos, e assim encontramos o X.
<br />
<br />
Dizem por aí que números não se comunicam.<br />
 Já nós preferimos pensar que eles ajudam na evolução de qualquer negócio e podem se comunicar muito mais do que imaginamos, inclusive nos inspirando criativamente.
  </div>

  <div class="quem-somos-content-2">
  <img src="images/quemsomos1.png" />
  </div>

<hr>


<div class="quem-somos-content-3">
<img src="images/quemsomos3.png" />
</div>

<div class="quem-somos-content-4">
<br />
<br />
<img src="images/quemsomos2.png" />
</div>

</div>
</div>

CSS:

    hr {
   display: block;
   position: relative;
   padding: 0;
   margin: 20px auto;
   height: 0;
   width: 50%;
   max-height: 0;
   font-size: 1px;
   line-height: 0;
   clear: both;
   border: none;
   border-top: 2px solid #FFF;
   border-bottom: 1px solid #FFF;
}

Answer 1

这与您的花车有关。即使您清除 float ，您的元素也不知道它们的真实大小。试试这个:

<div class="row">
    <div class="quem-somos">
        <a id="quem"></a>

        <h1 class="quem-somos-title">QUEM SOMOS?</h1>
        <h1 class="quem-somos-subtitle">VOCÊ COM CERTEZA JÁ OUVIU FALAR DAS FAMOSAS FÓRMULAS DE BHASKARA.</h1>

        <div class="quem-somos-content-wrapper">
            <div class="quem-somos-content-1">

                A equação completa de segundo grau agora pode ter mais sentido do que nunca. Pelo menos foi assim para a gente. Aprendemos a enxergar resultados claros e perfeitamente desenhados em cada problemática que analisávamos, e assim encontramos o X.
                <br />
                <br />
                Dizem por aí que números não se comunicam.<br />
                Já nós preferimos pensar que eles ajudam na evolução de qualquer negócio e podem se comunicar muito mais do que imaginamos, inclusive nos inspirando criativamente.
            </div>

            <div class="quem-somos-content-2">
                <img src="images/quemsomos1.png" />
            </div>
        </div>

        <hr>


        <div class="quem-somos-content-3">
            <img src="images/quemsomos3.png" />
        </div>

        <div class="quem-somos-content-4">
            <br />
            <br />
            <img src="images/quemsomos2.png" />
        </div>

    </div>
</div>

然后是 CSS:

quem-somos-content-wrapper{
    overflow: hidden;
}

现在您的边距应该适用于您的 <hr />