CSS Spacing

<% tp.file.cursor(2) %>

Summary

Cách sử dụng padding/margin/gap/ để tạo space trong/ngoài/giữa các phần tử với nhau.
Ảnh hưởng của chúng khi dùng kèm với position

Nếu chỉ định 2 tham số: margin: 100px 200px thì sẽ là top/bottom - left/right
Nếu chỉ định 3 tham số: margin: 100px 200px 150px thì sẽ theo ngược chiều kim đồng hồ: top - left - bottom. (right sẽ lấy theo left)
Có thể sử dụng margin: 0 auto
Negative margin: set margin-top: -20px để overlap elements bên trên.
Margin Collapse
- “Margin collapse works by selecting the largest value of two adjoining elements with vertical margin set on the adjoining sides.”
- Margin sẽ không cộng dồn vào. 2 phần tử cạnh nhau: 1 thằng margin-bottom: 50px, 1 thằng margin-top: 20px. Thì 2 thằng này sẽ cách nhau 50px, chứ không phải cộng dồn vào là 70px.
- Margin collapsing chỉ xảy ra với block margin chứ không phải với inline-margin.
- Muốn không bị ảnh hưởng bởi margin collapsing thì cần sử dụng position: absolute, hoặc sử dụng float.

Để tính toán size của box cho chuẩn thì ta nên sử dụng box-sizing: border-box.
- Ví dụ: Nếu element có padding: 30px, và width: 320px. Khi box-sizing: content-box , value của box sẽ là: 320 + 30 * 2 = 380px.
- Nếu sử dụng boxsizing: border-box thì box sẽ có giá trị = đúng 320 px

Các position cho phép ta add space elements với top, right, bottom, left, tuy nhiên, mỗi loại position lại control khác nhau:
- An element with position: relative will maintain its place in the document flow, even when you set these values. They will be relative to your element’s position too.
- An element with position: absolute will base the directional values from the relative parent’s position.
- An element with position: fixed will base the directional values on the viewport.
- An element with position: sticky will only apply the directional values when it is in its docked/stuck state.