The Box Model

the float property for images if it floats left or right and inline elements (text) to wrap around it https://developer.mozilla.org/en-US/docs/Web/CSS/float

The block element behavior

  • The box will break onto a new line.

  • The box will extend in the inline direction to fill the space available in its container. In most cases this means that the box will become as wide as its container, filling up 100% of the space available.

  • The width and height properties are respected.

  • Padding, margin and border will cause other elements to be pushed away from the box

The inline element bahavior

  • The box will not break onto a new line.

  • The width and height properties will not apply.

  • Vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box.

  • Horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box.

The display property

Define the outer layout, either block or inline, and the inner layout, which is flow layout (the default) , flex or grid.

https://developer.mozilla.org/en-US/docs/Web/CSS/display

The writing-mode property

the writing-mode property is closely related to the property display

  • horizontal-tb: Horizontal text and inline element flow, the block direction is top to bottom

  • vertical-rl: Vertical text and inline element flow, block direction is right to left

  • vertical-lr: Vertical text and inline element flow, block direction is left to right

In all cases, The direction property can be used to define the actual flow of the given language

since the properties width and height don’t naturally flip when flipping writing-mode property, Two new CSS properties can be used to eliminate the directional confusion:

  • inline-size

  • block-size

Similarly for margins and padding:

  • margin-block-start, margin-block-end, margin-inline-start, margin-inline-end

  • padding-block-start, padding-block-end, padding-inline-start, padding-inline-end

Finally,

top, right, bottom, and left.

These values also have mappings, to logical values respectively

block-start, inline-end, block-end, and inline-start