CSS：親コンテナの上からdiv埋め込みが始まらない

Question

this pageの場合、.snippet-action aのパディングは、.snippet-actionの先頭を超えて開始しています。

どのような変更私は.snippet-actionの上部に.snippet-action aのパディングトップスタートを作成する必要がありますか？

ヘルプありがとうございます。

<style> 
.snippet { 
    background-color: #FFD000; 
    padding-bottom: 8px; 
    border-radius: 9px; 
    -moz-border-radius: 9px; 
    -webkit-border-radius: 9px; 
    width: 48%; 
    margin-left: 2%; 
    float: left; 
} 
.snippet-image {z-index: 998;} 
.snippet-image img {width: 100%; height: auto; z-index: 998;} 
.snippet-text { 
    width: 94%; 
    margin: -42px 3% 0 3%; 
    padding: 3%; 
    background-color: #FFF; 
    padding-bottom: 40px; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    z-index: 999; 
    position: relative; 
} 
.snippet-action { 
    background-color: #FFD000; 
    padding-left: 3%; margin-top: -38px; 
    height: 38px; 
    max-width: 168px; 
    border-top-right-radius: 8px; 
    -moz-border-top-right-radius: 8px; 
    -webkit-border-top-right-radius: 8px; 
    z-index: 1000; 
    position: relative; 
    bottom: 0; 
} 
.snippet-action a { 
    font-size: 16px; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: #291B65; 
    padding: 18px 0 8px 3%; 
} 
</style> 

<div class="one-third"> 
    <div class="snippet"> 
     <div class="snippet-image"> 
      <img src="http://vmpersonal.com/wp-content/uploads/2017/02/product-personalized-consultation.jpg" /> 
     </div> 
     <div class="snippet-text"> 
      <h3>Personalized Consultation</h3> 
      <p>The Personalised Fitness Consultation is a premium service. The client has the opportunity to have a face-to-face conversation with Victor (VM Personal CEO), in order to develop the best... strategy towards taking your fitness to the next level.</p> 
     </div> 
     <div class="snippet-action"> 
      <a href="#">Learn More</a> 
     </div>   
    </div> 
</div> 

Answer 1

display: inline-block;から.snippet-action aを加算する。デフォルトでa要素はinline要素であり、inline要素はページに垂直レイアウトを持たない。要素を垂直方向のレイアウトにするには、inline-blockを使用するか、ブロックレベルの要素に変更します。

.snippet { 
 
    background-color: #FFD000; 
 
    padding-bottom: 8px; 
 
    border-radius: 9px; 
 
    -moz-border-radius: 9px; 
 
    -webkit-border-radius: 9px; 
 
    width: 48%; 
 
    margin-left: 2%; 
 
    float: left; 
 
} 
 
.snippet-image {z-index: 998;} 
 
.snippet-image img {width: 100%; height: auto; z-index: 998;} 
 
.snippet-text { 
 
    width: 94%; 
 
    margin: -42px 3% 0 3%; 
 
    padding: 3%; 
 
    background-color: #FFF; 
 
    padding-bottom: 40px; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    z-index: 999; 
 
    position: relative; 
 
} 
 
.snippet-action { 
 
    background-color: #FFD000; 
 
    padding-left: 3%; margin-top: -38px; 
 
    height: 38px; 
 
    max-width: 168px; 
 
    border-top-right-radius: 8px; 
 
    -moz-border-top-right-radius: 8px; 
 
    -webkit-border-top-right-radius: 8px; 
 
    z-index: 1000; 
 
    position: relative; 
 
    bottom: 0; 
 
} 
 
.snippet-action a { 
 
    font-size: 16px; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    color: #291B65; 
 
    padding: 18px 0 8px 3%; 
 
    display: inline-block; 
 
}

<div class="one-third"> 
 
    <div class="snippet"> 
 
     <div class="snippet-image"> 
 
      <img src="http://vmpersonal.com/wp-content/uploads/2017/02/product-personalized-consultation.jpg" /> 
 
     </div> 
 
     <div class="snippet-text"> 
 
      <h3>Personalized Consultation</h3> 
 
      <p>The Personalised Fitness Consultation is a premium service. The client has the opportunity to have a face-to-face conversation with Victor (VM Personal CEO), in order to develop the best... strategy towards taking your fitness to the next level.</p> 
 
     </div> 
 
     <div class="snippet-action"> 
 
      <a href="#">Learn More</a> 
 
     </div>   
 
    </div> 
 
</div>

Answer 2

display:inline-blockとpadding-leftとpadding-right

.snippet-action { 
     background-color: #FFD000; 
     margin-top: -38px; 
     height: 38px; 
     padding-left: 8px; 
     padding-right: 8px; 
     display: inline-block; 
     line-height: 45px; 
     max-width: 168px; 
     border-top-right-radius: 8px; 
     -moz-border-top-right-radius: 8px; 
     -webkit-border-top-right-radius: 8px; 
     z-index: 1000; 
     position: relative; 
     bottom: 0; 
    }