爲什麼這個<a>保證金不會移動容器div？

我this代碼：爲什麼這個<a>保證金不會移動容器div？

.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變得更加HIGHT（以及去到div的底部），但事實上，這並不發生！與padding-top一樣（它脫離了div ...）。它不聽容器！

爲什麼？我該如何解決這個問題？

編輯

其實什麼編號喜歡做的是對齊的輸入框和圖像，你可以看到的例子here：

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

來源

2011-07-13 markzzz

：

更新Demo fiddle。

CSS：

input, 
img { 
    vertical-align: middle; 
}

或者使用vertical-align: top;對齊頂部。

來源

2011-07-13 09:34:43 NGLN

更改爲：

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

或

div { 
    padding-top: 100px; 
}

取決於你想達到什麼。

來源

2011-07-13 09:20:06 Gal

不，我不能！我在鏈接的左邊有另一個元素... – markzzz

@markzzz然後你應該粘貼你的整個代碼。編輯。 – Gal

http://jsfiddle.net/yhx7A/1/：我必須對齊輸入框和圖像（不輸入，如果你沒有看到它.. :)） – markzzz

添加display: block;或者甚至更好：display: inline-block;。塊元素可以有高度。內聯元素不是。

您也可以考慮給錨定更大的行高（例如line-height: 2em;），但該功能僅適用於單行文本。

來源

2011-07-13 09:22:42 NGLN

做相反的事情：根據您的問題的更新

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

.myLink 
{ 
    background-color: red; 
}

來源

2011-07-13 09:25:43

.myDiv 
{ 
    background-color: blue; 
} 

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

您可以使用display：list-item;解決這個問題

來源

2011-07-13 13:35:20 Thamaraiselvi

爲什麼這個<a>保證金不會移動容器div？

回答

相關問題