CSS

Box Model

Content box: The text (or content)
- Main property: height and width
Padding box: The padding (space) between the text/content and the border
- Main property: padding
- Value can't be negative
Border box: The box's visible border
- Main property: border
- border-style
Margin box: The space between the box and its neighboring boxes. It's pushing away adjacent boxes
- Main property: margin
- Value can be positive, negative, or 0.
- When it is negative, instead of pushing away, it goes inward (overlapping)

.classname {

width: 350px;
height: 150px;

padding: 25px;
border: 5px solid black;
margin: 10px;

box-sizing: border-box;
display: inline-block;

}

The thickness of each side can be declared together or separately. Declaring together:

Block
- New line
- Extending in the inline direction, filling available space in its container.
- Height and width properties applied
- Padding, margin, and border will cause other elements to be pushed away from the box.
Inline
- Inline
- Height and width properties not applied
- Padding, margin, and border will apply, but:
  - Only the horizontal ones will cause other inline boxes to move away from the box.
  - The vertical ones will not.

By default, height and width are applied to the content box. This is also called standard box model.
It's more useful to define the border box size (including the padding and border). This is called alternative box model.
Declaration: box-sizing: border-box
To automate this for the whole document:

html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}

When 2 elements have their margins touch, the margins will combined into one margin value as follow:

When both margins are positive, combined margin is the larger value.
When both margin are negative, combined margin is the lower value (the more negative one).
When the margins are a positive and a negative value, add them like a math operation.
Examples:
- 50px and 30px: 50px
- -50px and -30px: -50px
- 50px and -30px: 20px
- -50px and 30px: -20px
Mastering margin collapsing

Can be used for horizontal centering.

Block and inline layout makes the normal flow. The default way things on the web behave.

By default, inner boxes within a box are laid out in normal flow. This inner display can be changed by defining display value.

display: flex
Outer display type is block, but inner display type is changed to flex
display: inline-block
To make the box wrap the text instead of the whole length of line
display: grid
display: inline-flex
display: inline
display: block

Inline-block is a very useful display value.

For a block box: The border will wrap around the content instead of the whole horizontal length.
For an inline box: The properties that are previosly not (fully) respected, will be complied just like a block box, but still located inline.
Some useful uses:
- Giving a link <a> a larger hit area by adding padding
- In navigation bars: Links are displayed in a row using flexbox and we add padding to the <a> element and set it so the background-color is changed when it's hovered. With display: inline-block, the links will not overlap the <ul> box anymore.
  
  .links-list a {
  background-color: lightyellow;
  padding: 1em 2em;
  display: inline-block;
  }
  
  .links-list a:hover {
  background-color: lavenderblush;
  }
  
  <nav>
  <ul class="links-list">
  <li><a href="">Link one</a></li>
  <li><a href="">Link two</a></li>
  <li><a href="">Link three</a></li>
  </ul>
  </nav>
  Without inline-block, the paddings overlap resulting the some text covered. However still need to find code for having them in the same line.