Boxes, Spacing and Borders

Every element on a page is a box, and CSS lets you control the space in and around it.

The Box Model

Each box has four layers, from the inside out:

Layer	What it is
Content	The text or image itself
Padding	Space inside the box, around the content
Border	A line around the padding
Margin	Space outside the box, pushing other boxes away

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    background-color: #fde68a;
    padding: 20px;
    border: 3px solid #b45309;
    margin: 30px;
  }
</style>
</head>
<body>

  <div class="box">Padding is the yellow space inside the border. Margin is the white space outside it.</div>

</body>
</html>

Try it Yourself »

Remember: padding is inside, margin is outside. Padding takes the background colour; margin is always transparent.

Setting Each Side

You can set all four sides at once or one at a time.

Example

css

.box {
  padding: 10px;              /* all four sides */
  padding: 10px 20px;         /* top and bottom 10px, left and right 20px */
  margin-top: 0;
  margin-bottom: 24px;
}

Rounded Corners and Shadows

border-radius rounds the corners. box-shadow adds a soft shadow, which makes a box look like a card lifted off the page.

Example

css

.card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

Grouping with div

To style a whole section as one box, wrap it in a <div> (or a <section>) and give it a class.

Your Page with Cards

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ayesha Khan</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #fff8e7;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
  }
  h1 { text-align: center; color: #b45309; }
  .card {
    background-color: white;
    padding: 16px 20px;
    margin: 0 auto 20px;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  .card h2 { margin-top: 0; color: #f59e0b; }
</style>
</head>
<body>

  <h1>Ayesha Khan</h1>

  <section class="card">
    <h2>About Me</h2>
    <p>I am a student from Karachi and I love drawing.</p>
  </section>

  <section class="card">
    <h2>My Hobbies</h2>
    <ul>
      <li>Drawing</li>
      <li>Reading stories</li>
      <li>Cricket</li>
    </ul>
  </section>

</body>
</html>

Try it Yourself »

max-width: 600px stops the cards from getting too wide on a big screen, and margin: 0 auto 20px centres them with 20px of space below each.

Box Sizing

By default, padding and border are added on top of the width. Many developers add this rule at the top of their CSS so a 300px box stays 300px wide:

Example

css

* {
  box-sizing: border-box;
}

Exercise

Which property adds space inside a box, between its content and its border?

paddingmarginborderspacing