なぜこれが<a>余白がコンテナdivを移動しないのですか？

Question

私はthisコードを持っている：

.myDiv 
{ 
    background-color: blue; 
} 

.myLink 
{ 
    background-color: red; 
    margin-top: 20px; 
} 

<div class="myDiv"> 
    <a class="myLink" href="javascript:void(0)">Ciao</a> 
</div> 

私はmargin-top私はdiv要素は、より多くの絶頂になったという側面をいただきたい増加（およびDIVの下に行く）が、実際には、このdoesntの問題が発生した場合は！ padding-topと同じです（divの外に出ます）。それはコンテナを聞いていない！

なぜですか？そして、どうすればこの問題を解決できますか？

<div> 
    <input type="text" /> 
    <a style="margin-top:10px; margin-left:5px;" href="#"> 
     <img alt="Cerca" src="/private_images/home_button_right.png"> 
    </a> 
</div> 

Answer 1

：

Answer 2

変更するには：：

.myLink 
{ 
    background-color: red; 
    padding-top: 100px; 
    display: inline-block; 
} 

EDIT Idは入力ボックスと画像の位置合わせされてやって好きなものを実際に

、あなたは一例hereを見ることができます

または

div { 
    padding-top: 100px; 
} 

あなたが達成したいことに応じて。

Answer 3

display: block;を追加してください。display: inline-block;。ブロック要素は高さを持つことができます。インライン要素ではありません。

アンカーに大きな線の高さ（例：line-height: 2em;）を付けることも考えられますが、これは1行のテキストでのみ機能します。質問のあなたの更新に基づいて

.myDiv 
{ 
    background-color: blue; 
    padding-bottom: 20px; 
} 

.myLink 
{ 
    background-color: red; 
} 

Answer 4

は反対のことを行う

はDemo fiddleを更新しました。

CSS：

input, 
img { 
    vertical-align: middle; 
} 

それともトップスを合わせるvertical-align: top;を使用しています。

Answer 5

.myDiv 
{ 
    background-color: blue; 
} 

.myLink 
{ 
    background-color: red; 
    display:list-item; 
} 

display：list-itemを使用できます。この問題を解決するには