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
  • 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
  • no height/width
    • Inline elements don't have to be rectangles
    • They can line wrap!
  • Space between elements
    • Could be because of whitespace
    • ???? Todo: image
    • Not a major issue nowadays
    • whitespace-spacing.png
    • cats-without-whitespace.png
  • Line wrap
    • inline-line-wrap.png
    • Horizontal padding is just on the tips

Inline padding-left/right

Default

box-decoration-break: slice;

inline-padding-left-right.png

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

-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

???? Do replaced elements act differently in flexbox or grid?

Inline-block

  • 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

Width

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

width keywords

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
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 7. unbreakable-word-in-narrow-char.png

Min/max width

min-width > max-width > width

Exercise

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

???? Wrong image make-figure-caption-word-wrap.png

make-figure-caption-word-wrap.png

Solution

  • width: min-content
    • will look for the widest child and make that the width

Height

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

Why percentage height has no effect

Goal

![[image-20221024080322661.png]]

Actual

![[image-20221024080337789.png]]

Parents shrink-wrap to fit their children snuggly

Height tends to look down the tree to see how tall it should be

Solution

html, body {
  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

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

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

Margin collapse

Rules of Margin Collapse

Will It Collapse? (Game)

collapsing-margin.png

Margin will collapse when there's two margins that are

  1. Vertical
    1. parent and child margins can merge if they're in the same direction
  2. touching (adjacent)
    1. not blocked by
      1. padding/border
      2. another element
      3. a gap (child margin doesn't extend outside of parent)
      4. scroll container
        1. overflow: auto, hidden, ...
  3. flow only

This won't collapse margin

<p>Paragraph One</p>
<br />
<p>Paragraph Two</p>

Margin increases distance between siblings - child can transfer margin to parent!

<div>
  <p>Paragraph One</p>
</div>
<p>Paragraph Two</p>

Padding gap between child and the parent's bounding box

<div style="min-height: 500px">
    <p style="margin-bottom: 20px">P One</p>
<div>
<p style="margin-top: 20px">P Two</p>

![[image-20221024103552947.png]]

  • including parent margin and child margin
    • (both can be margin-top)
  • only flow layout
    • flex and grid don't have this issue

How margin gets calculated

  1. Find the largest positive margin
  2. Find the largest (absolute) negative margin
  3. add them together

Last update: 2022-11-04