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

"E.g. Like padding is within the border, but how is margin calculated?"

Study this: http://www.w3.org/TR/css3-box/#margins

---

"Is it wrt the box border or with respect to the screen?"

The calculation of margins is independent from the border and the screen. The browser calculates the value for the margin separately, and then decides how it's going to be applied (rendered).

---

"If we give both left and right margins, what takes higher precedence?"

An algorithm is specified here: http://www.w3.org/TR/css3-box/#blockwidth

Could you give a specific example?

---

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

The rendering is almost instantaneous, so what counts is the end result, not the order in which the browser renders the element's properties.

---

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

Read here: http://www.w3.org/TR/css3-box/#floating

The used values of the margins are equal to the computed values, except that the used values of any margins computed as ‘auto’ are ‘0’.

Answer 2

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.