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 confused how this is actually rendered by the browser. E.g. Like padding is within the border, but how is margin calculated?
Is it wrt the box border or with respect to the screen?
If we give both left and right margins, what takes higher precedence?
If there is a width as well as left/right margins, how does the actual rendering take place like is the width of box made first,then the padding or what is it like?

What difference does a float attribute added to this box with margin make?

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.