Box model

TIP

1️⃣ margin 2️⃣ border 3️⃣ padding 4️⃣ height 5️⃣ width

margin collapsing

TIP

In General: Use either margin-top or margin-bottom

Shorthand Properties

Width and Height计算

TIP

默认width and height只是对content起作用，并不将border and padding计算在内，因为样式是box-sizing: content-box;

⭐ box-sizing: border-box; ---> The width and height of the element apply to all parts of the element: the content, the padding and the borders.

详细解释 box-sizing - CSS Reference

display

TIP

1️⃣ block 2️⃣ inline 3️⃣ inline-block

• Control behavior (block vs inline) of elements
• Mix behavior via inline-block
• Hidden elements via none