Box Model & Positioning Elements

• For practice - CSS Position Lab GitHub
• Demo - CSS Position Lab

The Box Model

The Box Model with box-sizing: border-box;

1. Positioning theory
2. More about the "position" property
3. The z-index
4. The Stacking Context
5. Mastering margin collapsing

Deep Dive on Margin Collapsing

Margin Collapsing

Adjacent Siblings

In this case, the first element might have a margin of 10px (on all sides let's say) and the second one has 5px (or 20px - the values don't matter). CSS will collapse the margins and only add the bigger one between the elements. So if we got margins of 10px and 5px , a 10px margin would be added between the elements

A Parent with Children that have a margin

• To be precise, the first and/ or last or the only child has to have margins (top and/ or bottom). In that case, the parent elements margin will collapse with the child element(s)' margins. Again, the bigger margin wins and will be applied to the parent element.
• If the parent element has padding, inline content (other than the child elements) or a border, this behavior should not occur, the child margin will instead be added to the content of the wrapping parent element.

An Empty Element with margins

This case probably doesn't occur that often but if you got an element with no content, no padding, no border and no height, then the top and bottom margin will be merged into one single margin. Again, the bigger one wins.

Shorthand Properties

"display: none" vs "visibility: hidden"

info

None

display: none;: This value removes the element to which you apply it from the document flow. This means that the element is not visible and it also doesn't block its position. Other elements can (and will) take its place instead. It's still part of the DOM though, you can still access it via JavaScript for example.

Hidden

visibility: hidden;: There is an alternative to that though. If you only want to hide an element but you want to keep its place (i.e. other elements don't fill the empty spot), you can use visibility: hidden;. Here it's not removed from the document flow and of course also not from the DOM.

Box Types: inline, block-level and inline-block

Positioning Schemes: Normal flow, Absolute positioning and Floats

1. When Using !important is The Right Choice
2. The :not() pseudo class

Float and Clear fix

1. Working With CSS Float And Clear Properties
2. More on float - MDN

tip

• In CSS, floating elements automatically have a display: block; applied to them. Floating elements behave similarly to blocks, and you can set a specific height and width.
• When floating block-level elements, they wrap around their content instead of taking up all available width. This means they behave more like inline-block elements, even though their display property remains as block in CSS.