What is the Box Model in CSS

When the browser renders an element, that element will be treated as a box. From the inside to the outside, you will find the content box:

Content box

The padding, which is the space between the border box and the content box:

Padding

The border box:

Border

As well as the margin, which is the space outside the border:

Margin

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="/styles.css">
</head>

<body>
  <p>Hello, World!</p>
</body>

</html>

Open Sandbox

Loading course content...