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:

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 »


Liked this post? Share it!