What is CSS2 Box Model Example

The CSS box model is a container that contains multiple properties including borders, margin, padding, and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customising the layout or different elements. The web browser renders every element as a rectangular box according to the CSS box model.

Explanation of the different parts:

Content – The content of the box, where text and images appear

Padding – Clears an area around the content. The padding is transparent

Border – A border that goes around the padding and content

Margin – Clears an area outside the border. The margin is transparent

Example

Demonstration of the box model:

p {
width: 80px;
height: 70x;
margin: 0;
border: 2px solid black;
padding: 5px;
}

The total width for the element can be calculated us:

Total element width = width+left padding+right padding +left border+right border+left margin+right margin

The <p> element can have a total width of 94px.

Total width=80px (width)+ 10px (left padding+right padding)+4px(left border + right border) + 0px (left margin+right margin) =94px.

The total height for the element can be calculated as:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Example 1: This example illustrates the use of the CSS Box Model for aligning & displaying it properly.

HTML

<!DOCTYPE html>
<head>
     <title>CSS Box Model </title>
     <style>
     .main {
          font-size: 360x;
          font-weight: bold;
          Text-align: center;
}

.co {
    margin-left: 60px;
    border: 50px solid #009900;
    width: 300px;
    height: 200px;
    text-align: center;
    padding: 50px;
}

.co1 {
     font-size: 42px;
     font-weight: bold;
     color: #009900;
     margin-top: 60px;
     backgroud-color: #c5c5db;
}

.co2 {
     font-size: 18px;
     font-weight: bold;
     background-color: #c5c5db;
}

</style>
</head>

<body>
    <div class="main">CSS BoX Model property </div>
    <div class="co">
         <div class="co1">CodeOne</div>
         <div class="co2">
              A computer science protal for code one
            </div>
            </div>
           </body>
           </html>



   

Output:

CSS Box Model Property

Example 2: This example illustrates the Box Model by implementing the various properties.

HTML

<!DOCTYPE html>
<head>
     <style>
      .main {
        font-size: 32px;
        font-weight: bold;
        text-align: center;
    }
    
#box {
     padding-top: 40px;
     width: 400px;
     height: 100px;
     border: 50px solid green;
     margin: 50px;
     text-align: center;
     font-size: 32px;
     font-weight: bold;
}
  </style>
</head>

<body>
    <div class="main">CSS Box-Model property </div>
    <div id="box">CodeOne</div>
</body>
</html>

Output:

CSS Box-Model property

Leave a Reply

Your email address will not be published.