box-model.md

The CSS box model is a fundamental concept in CSS that describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area and optional surrounding padding, border, and margin areas.

1. Content: This is the area where your actual content (text, images, etc.) appears. The dimensions of this area are specified by the width and height properties.

2. Padding: This is the area around the content, inside of the border. Padding is transparent and can be set using the padding property (or padding-top, padding-right, padding-bottom, padding-left).

3. Border: This is the area around the padding (if any) and content. It extends the padding area to the border edge. The border property (or border-top, border-right, border-bottom, border-left) is used to set the border width.

4. Margin: This is the area outside the border. It's used to create space around elements, separating the box from other boxes around it. The margin property (or margin-top, margin-right, margin-bottom, margin-left) is used to set the margin width.

div {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}

The content box will be 100x100 pixels. The padding adds 10 pixels around the content, making the padding box 120x120 pixels (100 content + 10 padding left + 10 padding right). The border adds another 5 pixels, making the border box 130x130 pixels (120 padding box + 5 border left + 5 border right). Finally, the margin adds another 20 pixels, but it doesn't affect the size of the element itself; it just creates space around the element.

The total width of the box can be calculated as the sum of the content width, left padding, right padding, left border, right border, left margin, and right margin. The same applies to the total height.

Understanding the box model is crucial for controlling layout and alignment in CSS. It's especially important when dealing with the box-sizing property, which controls whether the width and height properties include content, padding, and border, or just content. The default value is content-box, but border-box is often used to make the box model more intuitive.

What does * {box-sizing: border-box}?

The CSS rule * {box-sizing: border-box;} applies the border-box value to the box-sizing property for all elements on the page.

The box-sizing property defines how the width and height of an element are calculated. By default, it's set to content-box, meaning that width and height only apply to the content of the box, and any border or padding is added to that size to calculate the total size of the box.

When you set box-sizing to border-box, the width and height properties include the content, padding, and border, but not the margin.

  .box {
      box-sizing: border-box;
      width: 200px;
      padding: 20px;
      border: 5px solid black;
      background-color: lightblue;
  }

We have a class box that sets box-sizing to border-box, width to 200px, and padding to 20px. There's also a border of 5px and a background color to help visualize the box.

Despite the padding and border, the total width of the box remains 200px. The content area is 160px wide (200px - 20px left padding - 20px right padding), and the border adds another 10px to the total width (5px left border + 5px right border), but because of box-sizing: border-box, the total width remains 200px. The padding and border are included within the width, rather than added to it.

If you were to change box-sizing to content-box (or remove the box-sizing property, since content-box is the default), the total width of the box would be 250px (200px width + 20px left padding + 20px right padding + 5px left border + 5px right border), because the padding and border are added to the width. Using * {box-sizing: border-box;} is a common practice in CSS to make the box model more intuitive and easier to manage. It's especially useful in responsive design where you want the element to maintain a specific width regardless of the size of the padding or border.