TheCSS_BoxModel

Box

Some contents related to Box

• https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
• https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
• https://developer.mozilla.org/en-US/docs/Web/CSS/border
• https://developer.mozilla.org/en-US/docs/Web/CSS/padding
• https://developer.mozilla.org/en-US/docs/Web/CSS/margin

Display Property

• Inline: Width and Height are ignored. Margin & Padding push elements away horizontally but not vertically.
• Block: Block elements break the flow of a document. Width, Height, Margin, & Padding are respected.
• Inline-Block: Behaved like an inline element except Width, Height, Margin, & Padding are respected.

Hide element

h1{
    display: none;
}

CSS Unit Revisited

Relative

• em
• rem
• vh
• vw
• %
• and more!

Absolute

• px
• pt
• cm
• in
• mm

em

font-size: em meanings relative value from its parent.
margin: em meanings relative value from itself(font-size).

One problem from em will be if you put em in a nested structure, let’s say a nested list, the factor will either grow or shrink dramatically.

rem

Root ems

Relative to the root html element‘s font-size. Often easier to work with. If the root font-size is 20px, 1 rem is always 20px, 2rem is always 40px, etc.

---

Reference

https://www.youtube.com/watch?v=_-aDOAMmDHI