CSS Box Model

This article is created to describe the box model in CSS. Since around every HTML element, there is an invisible box that consists of:

  • Content of the Box
  • Paddings - Creates space or gap between the border and the content of specified element
  • Borders - Creates a border around an element.
  • Margins - Creates blank area or space around specified element. If element has a border, then the margin gets created around the border of specified element

Like shown in the image given below:

css box model

For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.a{padding: 12px; border: 4px solid red;}
      div.b{margin: 40px; border: 1px solid blue;}
      div.c{padding: 12px; background-color: gray;}
      div.d{width: 120px; height: 80px; padding: 18px;
         border: 12px solid green; margin: 40px;}
   </style>
</head>
<body>

   <div class="a">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
   </div>
   <div class="b">
      Lorem ipsum dolor sit amet consectetur.
   </div>
   <div class="c">
      Lorem ipsum dolor sit amet.
   </div>
   <div class="d">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit.
   </div>
   
</body>
</html>
Output
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet consectetur, adipisicing elit.

CSS Online Test


« Previous Tutorial Next Tutorial »