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的底部），但事实上这并没有发生！与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>

Answer 1

更改为：

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

或

div {
    padding-top: 100px;
}

取决于你想要达到的目标。

Answer 2

添加display: block;或甚至更好：display: inline-block;。块元素可以具有高度。内联元素不是。

您也可以考虑为锚点提供更大的行高（例如line-height: 2em;），但这仅适用于单行文本。

Answer 3

做相反的事情：

.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;解决这个问题

为何选择<a> margin doesnt move the container div?</a>

5 个答案: