Flow Layout

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

Inline Elements¶

thinks it's Typography
- Typography Layout

[!What's 2 special things about inline?]- - no height/width - can't apply padding - Inline elements don't have to be rectangles - - Horizontal padding is just on the tips

Troubleshooting inline issues¶

Mysterious space at the bottom of image¶

Not a part of the box model -

[!Solution to magic space at the bottom]- - display: block - line-height: 0 on the wrapping div

Unexpected space between inline elements (images)¶

[!Solution to magic space at the bottom]- whitespace in HTML

display: flex or grid

(this problem is only in flow)

line-height: 0 on the wrapping div

Inline padding-left/right¶

Default

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

???? replaced elements vs inline elements???? - images seem to act like inline elements (see above)

Inline-block¶

like inline except it has width/height
- 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 have that sweet sweet word wrap

Width ¶

Default: width: auto

Width keywords¶

auto vs 100%¶

[!Solution]- 100%: horizontal scroll if the child has margin - margin not a part of box-sizing: border-box

auto takes margin into account - will line wrap if needed - Kevin Powell: Stop using with: 100% - TODO: embed the short video

min-content¶

sizing based on the children

`max-content`¶

never add line breaks
may cause horizontal scroll

[!Use case of max-content]- why: if you want the background to only cover the text - max-content: - auto:

`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;

implicit width: auto
content is short (eg: 100px) -> max-width kicks in
content is long af
1. max-width: has no effect
2. width: auto
min-width handles large unbreakable word in narrow container

min-width vs max-width¶

min-width > max-width > width

Exercise¶

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

Before ![[image-20230113144441882.png]]

After

[!Solution to dynamic width figure and caption]- 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]]¶

Height ¶

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¶

Goal

![[image-20221024080322661.png]]

Actual

![[image-20221024080337789.png]]

Parents shrink-wrap to fit their children snuggly

Solution¶

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

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#Margin Collapse]]¶

Last update: 2023-04-24