Width & height

Controlling width & height 24 Pt2. Layout Width & height Is it a box? Which layout? CSS properties Width & Height Inline elements are not boxes even if they have no line breaks; width & height DO NOT apply! (But elements like <img> are always boxes.) The layout algorithm (flow, table, flexbox, grid) decides the rules of box dimensions. The layout can also size a box automatically. Various properties impose constraints on width & height to the layout algorithm: width: min-width: max-width: height: min-height: max-height: aspect-ratio: overflow: contain: NOTE : Constraints can depend on each other, or even conflict with each other. `auto` width & height (block, flow layout) Hello World Wide Web ● Width fills the available space of the container. ● The initial container is the viewport, so the page is as wide as the viewport by default. ● Height fits the content . ● The container is as tall as needed because the page can scroll vertically. How & why width & height have different rules: <p>Hello</p> <p>World Wide Web</p> width: auto; height: auto; Automatic dimension size when not specified determine width perform layout height is known Also, to flow a piece of text into line boxes, width must be known. The implication : content height depends on width. NOTE : Width actually means the inline axis (for horizontal text). 25 Pt2. Layout Width & height Percentage-based length width: 100%; parent border width: 100%; parent padding-right:14px; border 100% height or 100% width uses all available space of the container. (Using border-box .) parent padding: 25%; parent marging:25% Percentage-based margin & padding refers to horizontal space in both axis ! But border-width cannot use %. plenty of gotchas! Cyclic dependencies .parent { width: auto; } .child { width: 50%; } .parent { height: 80px; } .child { height: 50%; } .parent { height: auto; } .child { height: 50% ; } .parent { width: 80px; } .child { width: 50%; } /*40*/ .grandchild { width: 50%; } /*20*/ /* all the way down ... */ .parent { height: auto; } .child { height: auto ; } Width doesn't depend on content . Width can depend on the container . Height depends on content. %-based height requires a definite container height. %-based size will always work if the container size is definite because the dependency is 1-way . cyclic %-based size is treated as auto the result of width/height difference The priority of min-size, max-size, size min-width min-height max-width max-height width height low high 26 Pt2. Layout Width & height Content-based width (flow) Short Loooooooong Lots of words Short Loooooooong Lots of words Short Loooooooong Lots of words Short Loooooooong Lots of words min-content max-content fit-content clamp(min,stretch,max) stretch to container min content max content width:auto floats, position:absolute block inline-block, Auto-width can be content-based in flow layout. NOTE : min-content , max-content are calculated before layout. The calculation considers margin , padding , min-width , max-width , and etc. Cyclic dependencies (%-based values) are treated specially. Content-based height (flow) Gotchas height:min-content; height:max-content; height:fit-content; height: auto ; width:clamp(4em, auto , 8em); width:min( max-content , 8em); auto , *-content cannot be used in expressions. min-width:4em; width: auto ; max-width:8em; width: max-content ; max-width:8em; Comparing functions min(VAL, hi ) max( lo , VAL) clamp( lo , VAL, hi ) => max( lo , min(VAL, hi )) NOTE : lo wins over hi if lo > hi . (similar to min-width wins over max-width .) NOTE : like calc(), you can use any expressions and mix units. capped by hi floored by lo auto , *-content are only valid as size values. Content height is based on width; these are the same: