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:

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 »