<a>タグが高さを取得 - なぜですか？

-1

なぜ私は予想通り、フィーチャクラス上の私のマージンが動作しない理由だと思う<a>タグは以下の例では、高さを取得することjsfiddle <a>タグが高さを取得 - なぜですか？

です。コード

.feature { 
 
    margin: 0; 
 
    position: relative; 
 
    margin: 10px 0; 
 
} 
 

 
.feature__caption { 
 
    position: absolute; 
 
    bottom: 5px; 
 
    color: #c158ad; 
 
    text-align: center; 
 
    width: 100%; 
 
    font-size: 1.5em; 
 
    padding: 2% 0; 
 
    right: 0; 
 
    left: 0; 
 
}

<div class="col span_4_of_12"> 
 
    <figure class="feature"> 
 
    <a href="#"> 
 
     <img src="http://via.placeholder.com/350x150" alt="shoes"> 
 
     <figcaption class="feature__caption">ACCESSORIES</figcaption> 
 
    </a> 
 
    </figure> 
 
    <figure class="feature"> 
 
    <a href="#"> 
 
     <img src="http://via.placeholder.com/350x150" alt="shoes"> 
 
     <figcaption class="feature__caption">LATEST FASHION</figcaption> 
 
    </a> 
 
    </figure> 
 
</div>

出典

2017-07-22 Przemek85

これは、私がコードから期待する方法を正確に表現しています。私はあなたが何を期待しているのか分からないので、そのように見えない理由を説明するのは難しいです。 – Quentin

の中に、特定の幅と高さ（イメージ名からは350x150と推測しています）のを貼り付けていますか？ – csmckelvey

@Quentin dunnoなぜタグは正確に18pxの高さです。

でマージンが機能しない理由は何ですか？私は彼らがお互いを崩壊させることを意味する。 – Przemek85

これはあなたが望むものであるかどうかわからないの

サンプル。やってみて。