Skip to content

Flow Layout

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

Inline Elements

  1. Assumes it's Typography
  2. Magic space at the bottom
    • Not a part of the box model
    • magic-bottom-space-inline.png
    • Solutions
      • display: block
      • line-height: 0 on the wrapping div
  3. line wrap!
    • no height/width
    • Inline elements don't have to be rectangles
      • inline-line-wrap.png
      • Horizontal padding is just on the tips
  4. Space between elements
    • Could be because of whitespace (newline)
    • only in flow
    • whitespace-spacing.png
    • cats-without-whitespace.png

Inline padding-left/right


box-decoration-break: slice;


Since it line wraps, it only applies padding on the tips

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


Replaced elements

  • img
  • video
  • canvas

Inline wrapper on some foreign object

???? Do replaced elements act differently in flexbox or grid? - I don't see anything in MDN


  • like inline except you can apply padding
  • Like block that you drop in an inline context
  • Parent will treat it like inline
  • example: buttons
    • inline elements with padding
  • doesn't word wrap


Default: width: auto

auto vs 100%

  • auto
    • will grow as much as it can
    • won't eat into margin
    • Will line wrap
  • 100%
    • will match the parent's width
    • will cause horizontal scroll if there's margin
      • parent is 300px -> child will be 300px + margin
        • which will horizontal scroll
    • Kevin Powell: Stop using with: 100%

width keywords


  • sizing based on the children
  • min-content.png


  • 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


  • content can fit in parent -> act like max-content
  • otherwise: act like width: auto
Implementing fit-content
/* width: auto */
max-width: max-content;
min-width: min-content;
  1. implicit width: auto
  2. content is short (eg: 100px) -> max-width kicks in
  3. content is long af 4. max-width: has no effect 5. width: auto
  4. min-width handles large unbreakable word in narrow container
    1. unbreakable-word-in-narrow-char.png

Min/max width

min-width > max-width > width


    <img alt="" src="" />
    <figcaption>Found on Unsplash.</figcaption>

Before ![[image-20230113144441882.png]]



[!Solution]- on the parent figure -> width: min-content

'> will look for the widest child and make that the width

Setting a fixed width

  • set a max-width
  • prevent horizontal scroll where the width is wider than the screen
.button {
  max-width: 100%;

[[Which units to use#Width/heights]]


look down the tree to see how tall it should be

  • children determine parent height

Default height is like width: min-content - as small as possible to fit content

Setting a fixed height

  • you really shouldn't, will almost always cause overflow
  • use min-height

Why percentage height has no effect





Parents shrink-wrap to fit their children snuggly


html, body, #root, #__next {
  height: 100%;

When the body has height: 100%

this is better than height: 100vh because 100vh is a bit taller on mobile devices

Or the new CSS viewport heightheight: 100dvh * doesn't take the keyboard into effect

need to add height: 100% for every element between the html element and the element we want to stretch to 100% of the screen

Aspect Ratio

aspect-ratio: 1 / 1;

Implementing Aspect Ratio

width: 300px;
height: 0;
padding-bottom: calc(300px * 9 / 16);

For 9/16 ratio clientHeight

returns the inner height of an element in pixels, including padding but not

  • Horizontal scrollbar
  • height
  • border
  • margin


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.


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

[[Margin#Margin Collapse]]

Last update: 2023-03-20