Box model

Every element in web design is a retangular box (CSS Tricks)

1. size
   1. width
      

      width + padding-left + padding-right + border-left + border-right
                                              

   2. height
      

      height + padding-top + padding-bottom + border-top + border-bottom
                                              

1. Content box
   1. The area where your content is displayed
   2. Size it using properties like inline-size and block-size or width and height
2. Padding box
   1. The padding sits around the content as white space
   2. Size it using padding and related properties
3. Border box
   1. The border box wraps the content and any padding; size it using border and related properties
4. Margin box
   1. The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements
   2. Size it using margin and related properties

Outer Display of Block

1. The box will break onto a new line
2. The width and height properties are respected
3. Padding, margin and border will cause other elements to be pushed away from the box
4. If width is not specified, the box will extend in the inline direction to fill the space available in its container
5. In most cases, the box will become as wide as its container, filling up 100% of the space available
6. Some HTML elements, such as h1 and p, use block as their outer display type by default

Outer Display of Inline

1. The box will not break onto a new line
2. The width and height properties will not apply
3. Top and bottom padding, margins, and borders will apply but will not cause other inline boxes to move away from the box
4. Left and right padding, margins, and borders will apply and will cause other inline boxes to move away from the box
5. Some HTML elements, such as a, span, em and strong use inline as their outer display type by default

1. Boxes also have an inner display type, which dictates how elements inside that box are laid out
2. Block and inline layout is the default way things behave on the web
3. By default and without any other instruction, the elements inside a box are also laid out in normal flow and behave as block or inline boxes
4. You can change the inner display type for example by setting
   display: flex;
5. The element will still use the outer display type block but this changes the inner display type to flex
6. Any direct children of this box will become flex items and behave according to the Flexbox specification

Inline size

1. The inline-size CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode
2. It corresponds to either the width or the height property, depending on the value of writing-mode
3. 1. If the writing mode is vertically oriented, the value of inline-size relates to the height of the element;
   2. If the writing mode is horizontally oriented, the value of inline-size relates to the width of the element;