How To Make Box Model CSS in HTML ?

Box Model CSS

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>box model margin padding</title>

<style>

*{

        box-sizing: border-box;

        padding: 0px;

        margin: 0px;

}

    body{

        background-color: rgb(187, 218, 218);

}

    .container{

        border: 3px solid blue;

        background-color: #c4deea;

        padding: 14px 21px 14px 5px;

        margin: 27px 36px 47px 2px;

      border-radius: 12px;

      box-sizing: border-box;

}

</style>

</head>

<body>

    <h2>this is box model</h2>

       <div class="container">

           <p id="frist">Lorem ipsum dolor sit amet consectetur adipisicing elit. 

            Illum ut sint voluptatum iusto atque vel pariatur officia maxime, 

            excepturi illo, veniam explicabo.

            Rem cum molestiae, maiores fugiat ex voluptatum quaerat.</p>

       </div>

       <div class="container">

           <p id="second">Lorem ipsum dolor sit amet consectetur adipisicing elit.

            Illum ut sint voluptatum iusto atque vel pariatur officia maxime,

             excepturi illo, veniam explicabo.

            Rem cum molestiae, maiores fugiat ex voluptatum quaerat.</p>

       </div>

       <div class="container">

           <p id="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. 

            Illum ut sint voluptatum iusto atque vel pariatur officia maxime,

             excepturi illo, veniam explicabo.

            Rem cum molestiae, maiores fugiat ex voluptatum quaerat.</p>

       </div>

       <div class="container">

           <p id="fourth">Lorem ipsum dolor sit amet consectetur adipisicing elit. 

            Illum ut sint voluptatum iusto atque vel pariatur officia maxime,

             excepturi illo, veniam explicabo. 

            Rem cum molestiae, maiores fugiat ex voluptatum quaerat.</p>

       </div>

</body>

</html>

Sunday 7 March 2021