layout.html

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>layout</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            background-color: black;
            color: white;
            border: 2px solid white;
            margin: 1px;
        }
        .content{
            background-color: red;
            height: 90vh;
            border: 2px solid aqua;
            margin: 1px;
            box-sizing: border-box;
        }
        footer{
            background-color: rgb(201, 234, 11);
            border: 2px solid aliceblue;
            margin: 1px;
        }
    </style>
  </head>
  <body>
    <header>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </header>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta qui
        temporibus at ipsa deserunt, est aperiam fuga eaque quod ea magnam
        adipisci natus commodi, facere iusto nobis earum, fugiat nesciunt quo
        autem voluptatum aliquam.
      </p>
    </div>
    <footer>Copyright &copy; Arun</footer>
  </body>
</html>
 -->
 <!DOCTYPE html>
 <html>
 <head>
 <style> 
 .div1 {
   width: 300px;
   height: 100px;
   border: 1px solid blue;
   box-sizing: border-box;
 }
 
 .div2 {
   width: 300px;
   height: 100px;  
   padding: 50px;
   border: 1px solid red;
   box-sizing: border-box;
 }
 </style>
 </head>
 <body>
 
 <h1>With box-sizing</h1>
 
 <div class="div1">Both divs are the same size now!</div>
 <br>
 <div class="div2">Hooray!</div>
 
 </body>
 </html>
 
 
 