Skip to content

Box Model

  1. content
  2. Padding
    1. inner space
    2. same background as content
  3. [[Border]]
  4. [[Margin]]

padding/margin: 50%

https://courses.joshwcomeau.com/css-for-js/01-rendering-logic-1/05-padding

relative to the width width

/* top padding/margin will be 50% of the width */
padding-top: 50%;

Units for border/margin/padding

text use rem

  • don't use em
  • we want text to start-align

border/margin/padding: use pixels

  • we want more words per page

Ways to affect zooming 1. cmd +/- 1. increases the size of a pixel 2. browser/OS font size 1. only increases text size

Percents

  • percent is based on the width
    • possibly sometimes the height?
    • margin-top: 10% may be calculated from the parent width, not height?

Logical properties

Prefix with

  • border
  • margin

  • padding

  • -block-start: top

  • -block-end: bottom
  • -inline-start:left
  • -inline-end: right

example

  • border-block-start: 10px

box-sizing

box-sizing.png

Default: box-sizing: content-box

  • width: 100px
    • content: 100px

box-sizing: border-box

  • setting width: 100px
    • content + padding + border = 100px
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}
Last update: 2023-02-03