CSS Box Model: Margin, Padding, Border — Free HTML Tutorial

TL;DR: Learn CSS Box Model: Margin, Padding, Border in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

CSS Box Model: Margin, Padding, Border in HTML

Box model: content (inner), padding (inside border), border (outline), margin (outside). All are important for spacing.

padding: 10px adds space inside. margin: 10px adds space outside. border: 2px solid creates outline.

box-sizing: border-box makes width/height include border and padding. Always use this property globally.

<style>
  * { box-sizing: border-box; }
  .box {
    width: 200px;
    padding: 20px;
    border: 2px solid blue;
    margin: 15px;
  }
</style>

Learn CSS Box Model: Margin, Padding, Border step by step with Syllab's free interactive HTML tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full HTML course →