Box-Model in CSS

What is box model?

  • Box Model is just like a box that wraps around every HTML element.

  • A box model contains content, padding, border, and margin.


Understanding Box Model

i) content - It is the actual content which includes: text, and images

ii) padding- Creates the space around the content.

iii) border- Border area where the content's border will be set.

iv) margin- Creates the space around the content border.


How the actual box model looks like


Understanding With Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Box Model in CSS</title>
    <style>
        .myBox {
            width: 200;
            border: 4px solid skyblue;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>

    <div class="myBox"> This is a Box  </div>
   
</body>
</html>

Output:


Box Model in CSS Part-8 PDF

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad