为什么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;下图中的效果如何？

如何解决此问题？

Answer 1

垂直边距和填充仅在块级元素中有效，<label>是内联元素。您可以使用其他属性模拟它或转换为内联块：

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

Answer 2

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