CSS Margin calculation

Question

While i do understand the overall CSS box model in theory like padding, border, margin, my understanding is restricted to this individual parts.

I often gets confuse

Answer 1

The box consists of 4 sizes: outer to inner:

1. Margin - that's the space from the parent, it stacks with the parent's padding.
2. Border - that's the border's width, it can be specified with border: or border-width:
3. Padding - that's the space inside the box, if any content/elements inside that box will be spaced that from its sides.
4. Width - the actual box's width, may change according to content, 100%, or a fixed width as specified in width: or max-width:

An image for illustration:

---

A floated element takes margin into account, so if you have

#element { margin-left: 100px; float: left; }

it will float left, but will have a 100px margin from the left side.