Intrinsic sizing
- max-content: Sets the size of an element to fit the content within easily
- min-content: Sets the size of an element to
box-sizing
The box-sizing CSS property sets how the total width and height of an element is calculated
box-sizing: content-boxgives the default sizing.
box-sizing: border-box the width will also consist the of border, making it easier to work with the size of the element. This is the default attribute of the following tags:
- select
- input
- button
- submit etc.
Display
block
a div has this display attribute.
display: block:
- Takes up the full width available in its parent container.
- Always starts on a new line.
- Can have width and height set explicitly.
- Respects top and bottom margins.
inline
span has this attribute
inline elements have a block margin but other elements don’t respect it.
display: inline:
- Flows with surrounding content (doesn’t start on a new line).
- Does not respect width and height.
- Horizontal margins and paddings are applied, but vertical ones don’t affect layout.
- Cannot be aligned with the
vertical-alignproperty.
inline-block
display: inline-block:
- Only takes up as much width as necessary.
- Doesn’t start on a new line (flows with surrounding content).
- Can have width and height set explicitly.
- Respects all margins.
- Behaves like an inline element, but with block-level features.
list-item
E. g.