/    /  CSS Box Model

CSS Box Model

 

Every element that can be displayed on a web page is comprised of one or more rectangular boxes. CSS box model typically defines how these rectangular boxes are laid out on a web page(website). These boxes can have multiple properties and can interact with each other in different ways, but every box has a content area and optional surrounding padding, border, and margin areas.

 

CSS Box Model

 

Elements of the width and height:

 

Height :           height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Width :           width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

 

Example:

 

<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
      .main
{
        font-size:30px;
        font-weight:bold;
        Text-align:center;
      }
      .gfg
{
         margin-left:50px;
         border:50px solid red;
         width:300px;
         height:200px;
         text-align:center;
         padding:50px;
      }
      .gfg1
{
         font-size:40px;
         font-weight:bold;
         color:black;
         margin-top:60px;
         background-color:pink;
      }
      .gfg2
{
         font-size:20px;
         font-weight:bold;
         background-color:white;
      }
</style>
</head>
<body>
<div class = "main">CSS Box-Model Property</div>
        <div class = "gfg">
       <div class = "gfg1">I2Tutorials</div>
       <div class = "gfg2">A best portal for learn Technologies</div>
</div>
</body>
</html>

 

OUTPUT:

 

CSS Box Model