带有填充的Css链接按钮不尊重顶部和底部边距

Question

此按钮不符合margin-top和margin-bottom，我不知道为什么......

.button {
    background: #E48F8F;
    border: 0;
    padding: 15px 45px 15px 45px;
    background-color:DeepSkyBlue;
    color:white;
    font-family:'Gotham Book';
    font-size:15px; 
    margin-top:30px;
}

这是HTML：

<div class="side_bar">
     <h3>Veja Também</h3>
     <div class="separator"></div>
     <div class="side_bar_item">
         <img src="img/psicoterpia.jpg" />
         <h3>Psicoterapia</h3>
         <p>A Psicoterapia é uma prática clínica desenvolvida e aplicada por psicólogos, com o intuito de oferecer, tanto para os que têm uma queixa definida ou não, condições que proporcionem mais auto-conhecimento e, consequentemente, um melhor estilo de vida. Existem diversas abordagens e cada uma delas atende melhor a um determinado tipo de indivíduo.</p>
         <a href="#" class="button">Saiba Mais</a>
     </div>   
</div>

这是一张正在发生的事情的图片：

Answer 1

将.button显示属性设置为block或inline-block

.button {
    display: inline-block;
}

默认情况下，a代码设置为display: inline，不会尊重margin属性。

查看此JSFIddle example并查看W3Schools上的CSS display Property

Answer 2

您可以将某些部分放在div中，其中包含class的功能。 See example you can play with

<div class="side_bar">
     <h3>Veja Também</h3>

    <div class="separator"></div>
    <div class="side_bar_item">
        <img src="img/psicoterpia.jpg" />
         <h3>Psicoterapia</h3>

        <p>A Psicoterapia é uma prática clínica desenvolvida e aplicada por psicólogos, com o intuito de oferecer, tanto para os que têm uma queixa definida ou não, condições que proporcionem mais auto-conhecimento e, consequentemente, um melhor estilo de vida. Existem diversas abordagens e cada uma delas atende melhor a um determinado tipo de indivíduo.</p>
        <div class="Button-look"> <a href="#" class="button">Saiba Mais</a>

        </div>
    </div>
</div>

并且CSS看起来像这样

.button {
    background: #E48F8F;
    border: 0;
    padding: 15px 45px 15px 45px;
    background-color:DeepSkyBlue;
    color:black;
    font-family:'Gotham Book';
    font-size:20px;
}
.Button-look {
    margin-top:20px;
}
}

Answer 3

<div class="side_bar">

        <h3>Veja Também</h3>

        <div class="separator"></div>


        <div class="side_bar_item">

            <img src="img/psicoterpia.jpg" />

            <h3>Psicoterapia</h3>

                <p>A Psicoterapia é uma prática clínica desenvolvida e aplicada por 
psicólogos, com o intuito de oferecer, tanto para os que têm uma queixa definida ou
não, condições que proporcionem mais auto-conhecimento e, consequentemente, um melhor 
estilo de vida. Existem diversas abordagens e cada uma delas atende melhor a um 
determinado tipo de indivíduo.</p>
            <br>
             <a href="#" class="button" style="color: white" width="100%">Saiba
             Mais</a>
            </br>
        </div>   

尝试添加线制动器和style =“color：white”width =“100％”