スパンが下を超えて整列なぜ、私はそれが

Question

、私にWHYこれが起こっている説明してください操作することができるか - スパンのテキストがを超え画像の下部に整列されている理由を - と私は実際に操作することができますかpaddingとmarginで操作すると、x座標とy座標で移動できません。私はそれを最終的に働かせることができますが、これを行う簡単な方法がいくつかあります。

HTML：

<div class="cnt"> 
    <img src="http://ecx.images-amazon.com/images/I/41jlGA2RzmL._SS40_.jpg"><span>zzz</span> 
</div> 

はCSS：imgの

html,body,.cnt,img,span { 
    margin: 0; 
    padding: 0; 
} 
.cnt { 
    width: 300px; 
    border: 1px solid #777; 
} 
.cnt img { 
    background: #090; 
} 
.cnt span { 
    margin-top:-20px; 
    background: #333; 
} 

https://jsfiddle.net/kcepLrhx/

Answer 1

デフォルトvertical-alignは、ベースラインで揃えることです。 https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

は、あなたが実際に設定することができます絶対にspan位置を、それを変更img

html,body,.cnt,img,span { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.cnt { 
 
    width: 300px; 
 
    border: 1px solid #777; 
 
} 
 
.cnt img { 
 
    background: #090; 
 
    vertical-align: middle; 
 
} 
 
.cnt span { 
 
    margin-top:-20px; 
 
    background: #333; 
 
    
 
}

<div class="cnt"> 
 
    <img src="http://ecx.images-amazon.com/images/I/41jlGA2RzmL._SS40_.jpg"><span>zzz</span> 
 
</div>

Answer 2

にvertical-alignを変更するには、あなたはx、y座標を制御する必要がありますマージンの賛否論と一緒に。 cntの位置がの相対であることを確認します。これは作成する要素のデフォルト位置です。例えば

：

html,body,.cnt,img,span { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.cnt { 
 
    width: 300px; 
 
    border: 1px solid #777; 
 
    position: relative; /* It is the default value */ 
 
} 
 
.cnt img { 
 
    background: #090; 
 
} 
 
.cnt span { 
 
    background: #333; 
 
    margin-top: 15px; 
 
    margin-left: 15px; 
 
    position: absolute; /* span position is absolute to the div position */ 
 
}

<div class="cnt"> 
 
    <img src="http://ecx.images-amazon.com/images/I/41jlGA2RzmL._SS40_.jpg"><span>zzz</span> 
 
</div>

https://jsfiddle.net/Lgyw4co2/