CSS Margin Calculation

Question

While I really understand the general theory of CSS fields in theory, like filling, border, margin, my understanding is limited to these individual parts.

I am often confused about how this is really displayed by the browser. For instance. How the gasket is inside the border, but how is the margin calculated? Is it on the border of the box or in relation to the screen? If we give both a left and a right margin, what has a higher priority? If there is a width, as well as left / right margins, how does the actual rendering happen, for example, the width of the window made first, then the filling, or what is it?

What is the difference if the float attribute is added to this square with a field?

Answer 1

The box consists of 4 sizes: from external to internal:

• Margin is the space from the parent; it is added up with the parent addition.
• Border - the width of the border, it can be specified using border: or border-width:
• Padding is the space inside the field if any content / elements inside this field are located at a distance from its sides.
• Width - the actual width of the field, can be changed according to the content, 100% or fixed width, as specified in width: or max-width:

Image for illustration:

---

The floating point element takes into account margin, so if you have

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

it will float to the left, but will have a margin of 100 pixels on the left side.

Answer 2

“For example, how is the gasket inside the border, but how is the margin calculated?”

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

---

"Is it on the border of the frame or in relation to the screen?"

Calculation of fields does not depend on the border and screen. The browser calculates the value for the field separately, and then decides how it will be applied (displayed).

---

"If we give both left and right margins, what has a higher priority?"

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

Could you give a concrete example?

---

"If there is a width, as well as left / right fields, how does the actual rendering happen, for example, the width of the window done first, then the filling, or what is it?"

rendering is almost instantaneous, so the final result is calculated, not the order in which the browser displays the properties of the element.

---

"What's the difference if the float attribute is added to this square with the mark?"

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

The used field values ​​are equal to the calculated values, except that the used values ​​of any fields calculated as "auto" are 0.