Shorthand & Centring · CSS

Ch 2 · The Box Model — card 3 of 3.

Every box has four sides, and you can set each one separately with properties like padding-top or margin-left. Writing four lines each time gets tiring, so CSS lets you set several sides in one shorthand value.

• 1️⃣ One value for all four sides
• 2️⃣ Two values for top-and-bottom, then left-and-right
• 🎯 Centring a box with margin: 0 auto

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Page</title>
    <style>
      body { background: #f1f5f9; font-family: system-ui, sans-serif; }
      .banner {
        padding: 12px 24px;
        background: #0ea5e9;
        color: white;
        border-bottom: 4px solid #0369a1;
      }
      .card {
        width: 260px;
        margin: 30px auto;
        padding: 10px 20px 30px 40px;
        background: white;
        border: 2px dashed #64748b;
      }
    </style>
  </head>
  <body>
    <div class="banner">Sports Day is on Friday!</div>
    <div class="card">Four values go clockwise: top, right, bottom, left.</div>
  </body>
</html>

padding: 12px 24px gives 12px at the top and bottom and 24px on the left and right. With four values, as in padding: 10px 20px 30px 40px, they go clockwise from the top: top, right, bottom, left. In margin: 30px auto, auto on the left and right shares out the leftover space equally, which centres the card. border-bottom draws a line on one side only.

• One value = all sides; two values = top-and-bottom, then left-and-right
• Four values run clockwise, starting at the top
• margin: auto centres a box sideways only when it is narrower than its container, so give it a width