为什么CSS边距无效？

Question

我一直在与这个烦人的代码斗争。你也许认为我已经练习了足够多的css，但像往常一样，它对我来说很难搞。

我的问题如下，我有以下的css：

.FORM ul li label {
    margin-top: 50px;    //<--------------THE PROBLEM
    height: 20px;
    max-height: 20px;
    width: 100px;
    min-width: 100px;
}
.FORM ul li {
    list-style: none;
    width: 500px;
    height: 100px;
    min-width: 500px;
    min-height: 100px;
    background: #ddd;
    border-top: #eee 1px solid;
    border-bottom: #bbb 1px solid;
    padding: 10px 10px;
    margin: auto;
}
ul {
    background: #ccc;
    padding: 10px 10px 10px 10px;
    width: 530px;
    margin: auto;
}
body {
    background: #cfc;
    padding: 0px;
    margin: 0px;
}
.FORM {
    background: #fcc;
}

它所控制的HTML是：

<form class="FORM">
    <ul>
        <li>
            <label for="workersAddr">Worker's Address:</label>
            <input type='text' id='workersAddr' class='validate[required,minSize[5]]'/>
        </li>
    </ul>
</form>

请注意，下面的图片中margin-top: 50px;没有任何效果。

我该如何解决这个问题？

- vvMINOvv

---

将其更改为 padding-top: 50px。 - Shakti Singh

同样的问题，标签没有移动一像素... 谢谢。 - vvMINOvv

Answer 1

垂直外边距和内边距只对块级元素生效，<label> 是一个内联元素。您可以使用其他属性来模拟它，或将其转换为内联块级元素：

.FORM ul li label {
    display: inline-block;
}

- Álvaro González

Answer 2

在标签上使用line-height css属性。这不会增加标签上任何可见背景的高度，但可以让您有效地添加边距。

- JSideris

---

不错的答案。使用行高而非其他交互可以避免问题。 - David

这个绝对出乎意料的答案实际上帮助我将一个<div>移动到了<li>里面。这是一件非常微不足道的事情，但却有着神奇的解决方案。 - AbstractVoid