Skip to content

Flow Layout

https://courses.joshwcomeau.com/css-for-js/01-rendering-logic-1/09-flow-layout

display: inline;
display: block;
display: inline-block;

Inline Elements

Assumes it's Typography

  • TODO: LINK TO TYPOGRAPHY

Magic space at the bottom

- ![magic-bottom-space-inline.png](magic-bottom-space-inline.png)
  • display: block
  • line-height: 0 on the wrapping div

no height/width

No inline styles for pseudo-classes/elements

  • inline styles are only defined in HTML
  • pseudo-classes/elements are defined in CSS
  • ????????

Line wrap

  • inline-line-wrap.png

Inline padding-left/right

Default

box-decoration-break: slice;

inline-padding-left-right.png

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

box-decoration-break-clone.png

Replaced elements

  • img
  • video
  • canvas

Inline wrapper on some foreign object

Inline-block

  • like inline except you can apply padding
  • example: buttons
    • inline elements with padding
  • doesn't word wrap

Width

Default: width: auto

auto vs 100%

  • auto
    • will grow as much as it can
    • won't eat into margin
  • 100%

    • will match the parent's width
    • may cause horizontal scroll
  • min-content

    • sizing based on the children
    • min-content.png
  • max-content
    • never add line breaks
    • may cause horizontal scroll
      • why: if you want the background to only cover the text
      • width-max-content.png
      • width-auto-background-color.png
  • fit-content
    • content can fit in parent -> act like max-content
    • otherwise: act like width: auto

fit-content can be implemented with

max-width: max-content;
min-width: min-content;
need the min-width to handle large unbreakable word in narrow container

unbreakable-word-in-narrow-char.png

TODO: figure out how this works - https://courses.joshwcomeau.com/css-for-js/01-rendering-logic-1/10-widths

Min/max width

min-width > max-width > width

Height

clientHeight

returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin

offsetHeight

is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

scrollHeight

is a measurement of the height of an element's content including content not visible on the screen due to overflow


Last update: 2022-09-23