TIL7 - CSS - Box Model

1. The Box Model

<image source: codecademy.com>

• Padding
  The space between the content and the border of the element
• Border
  The space that surrounds the content and its padding
• Margin
  The space that separates an element from another element
  > if margin = 0, the edge of the element will be touching the edge of the adjacent element
  > horizontal margins add - the total space between two elements is the sum of their margins
  > vertical margins collapse - the total space between two elements is the bigger of their margins
  > margin: 0 auto is used to horizontally center the element (the element's width must be defined first for this to work)
  

2. Changing the Box Model

With the default box model, when you set the width and height of an element, the actual(total) width/height will be different from the width/height you have specified - because of padding & border.

The default box model, as above, is box-sizing: content-box
> here the width/height you specify for the element will be the width/height of the element's content

In order to have a total element width/height that doesn't change with padding & border specifications, you must change the default box model. This would be box-sizing: border-box
> here the width/height you specify for the element will be the width/height of the entire element (content + padding + border). The width/height of the content will be auto adjusted
> To make this box model apply to the entire CSS document, you can use the * selector at the beginning of the document:

* {
  box-sizing: border-box;
}