为什么css边距不起作用？

I have been struggling with this annoying piece of code. You'd think I'd had enough practice with css, but as always, it is temperamental with me.

我一直在努力解决这段恼人的代码。你认为我已经有足够的css练习了，但是和往常一样，这对我来说很有气质。

My problem is as follows, I have the following 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;
}

the html it controls is:

它控制的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>

notice how in the image below the margin-top: 50px; have no effect at all?

请注意在margin-top下面的图片中如何：50px;完全没有效果？

how do I solve this issue?

我该如何解决这个问题？

2 个解决方案

#1

Vertical margins and paddings only have effect in block-level elements and <label> is an inline element. You can either emulate it with other properties or convert into an inline-block:

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

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

#2

Use the line-height css attribute on the label. This will not increase the height of any visible background on the label, but will allow you to effectively add a margin.

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