与填充不尊重顶部和底部边缘

Question

此按钮不尊重边距和下边距，我不知道为什么CSS链接按钮...

.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的

Answer 2

<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> 

尝试添加线制动器和风格=“颜色：白色” WIDTH =“100％”

Answer 3

你可以把某些部分在一个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; 
} 
}