为什么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;
}