1. home
  2. Tutorials
  3. Tutorial
Edit

Padding, Borders, and the Box Model

The CSS box model is a box that wraps around every HTML element. It include margins, borders, padding, and the actual content.

Example of Code

<style type="text/css">  
  .box-model-padding {
    width: 150px;
    height: 50px;
  }
  .box-model-padding {
    padding: 20px;
    background: gold;
  }
  .box-model-no-padding {
    padding: 0;
    background: limegreen;
  }
</style>
<body>
    <div class="box-model-padding">
      Padding
    </div>
    <div class="box-model-no-padding">
      No padding
    </div>
</body>

Output
 

    
      Padding    
    
      No padding