Why css margins don't work?

Question

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.

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

<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?

how do I solve this issue?

Answer 1

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.

Answer 2

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;
}