Table of Contents

What is the Box Model in CSS

Code Playground is only enabled on larger screen sizes.

Padding

Padding is the space between the border box and the content box, defined by the padding property.

css

padding: <top> <right> <bottom> <left>;
padding: <top> <left_and_right> <bottom>;
padding: <top_and_bottom> <left_and_right>;
padding: <all>;

Similar to borders, you can always set individual paddings using properties padding-top, padding-right, padding-bottom, and padding-left.

Margin

You can add space outside the border so that two neighboring elements do not touch each other. This space is called margin, defined by the margin property.

The margin property works similarly to padding.

css

margin: <top> <right> <bottom> <left>;
margin: <top> <left_and_right> <bottom>;
margin: <top_and_bottom> <left_and_right>;
margin: <all>;

<!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...