Floats and horizontal margins

I have the following CSS:

label{
    float:left;
    margin-left:24px;
}

button{
    margin-left:24px;
}

for this HTML:

<label>
    <input>
</label>
<button>

and I was hoping that the button was found at a distance of 24 pixels of the label, however this did not happen until I floated the button to the left too. What part of the CSS specification I can refer to understand why this happening?

(Please, sorry my English.开发者_如何学Go)

---

Just read the W3C documentation for float:

Here are the precise rules that govern the behavior of floats:

1. The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.
2. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
3. The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is next to it. Analogous rules hold for right-floating elements.
4. A floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
6. The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.
7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
8. A floating box must be placed as high as possible.
9. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

It's because inline elements can't have a margin property. <label> is an inline element, and by floating it, you make it act as if it were an inline-block, allowing you to add a margin to it.

It's strange. Try using display: inline-block; instead of float: left; and see what happens.

---

Sorry for my previous answer which I hope was deleted.

Margins are tricky. In this case, margins don't count against floats: they are computed from the place where the element would start if the float wasn't there. Possibly you can apply a margin-right to the float, or if you know the float's width add that plus its margin to the value you want to separate them.

---

A training made by the W3C consortium may help you.

And the specification with all the theory involved with this field: Visual formatting model