The Box Model

The CSS box model describes the structure of elements. Each box consists of:

• Margin: Space outside the border that separates the element from others.
• Border: A line surrounding the padding.
• Padding: Space between the content and the border.
• Content: The actual content of the box (text, images).

+----------------------+
|       Margin         |
|  +----------------+  |
|  |    Border      |  |
|  | +------------+ |  |
|  | |  Padding   | |  |
|  | | +--------+ | |  |
|  | | |Content | | |  |
|  | | +--------+ | |  |
|  | +------------+ |  |
|  +----------------+  |
+----------------------+

.box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid black;
  margin: 10px;
}

What does the width and height mean in above example?

box-sizing

The box-sizing property in CSS controls how the width and height of an element are calculated. There are two values:

content-box(default): Width and height only include the content, excluding padding and borders. This can lead to elements being larger than expected when adding padding or borders.

border-box: Width and height include content, padding, and borders. This makes layout more predictable, as you specify the total size without worrying about extra space from padding or borders.

Use the DevTools

Browsers come with built-in developer tools that help in debugging and optimizing websites. These tools can inspect HTML and CSS, analyze network requests, and test performance.

To work with the DOM or CSS, right-click an element on the page and select Inspect to jump into the Elements panel.