與填充不尊重頂部和底部邊緣

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