What is CSS box model and how to apply it to an HTML element?

CSS Box Model is a fundamental concept in CSS that wraps around every HTML element. It consists of margins, borders, padding, and actual content. The box model allows developers to place the elements on the page and design and control their layout.

1. CONTENT: This is the innermost part where text and images appear.
2. PADDING: Clears an area around the content. The padding is transparent.
3. BORDER: A border that goes around the padding and content.
4. MARGIN: Clears an area outside the border. The margin does not have a background color, and is completely transparent.

Here is an example of how to apply it:

```

This is a box with 300px of content, 25px of padding, 25px of margin, and 25px of border.

```

In this example, the CSS box model is being applied to a `div` element. The content of the box has a width of 300 pixels. Padding is added inside of the box, around the content, with a width of 25 pixels. A border is added outside of the padding with a width of 25 pixels. Finally, a margin is added outside of the border with a width of 25 pixels.

Note: The total width of the element is calculated as the sum of the content width, left padding, right padding, left border, right border, left margin, and right margin. So in this case, the total width is 450 pixels.