Html Css Box Model — Free Html Tutorial

TL;DR: Learn Html Css Box Model in Html with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

Html Css Box Model 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 Html Css Box Model 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 →