CSS The Box Model

The CSS box model is a fundamental concept in web design. It is a conceptual model that describes how HTML elements are displayed on a web page. The box model consists of four parts:

Content: The actual content of the element, such as text, images, or videos.
Padding: The space between the content and the border.
Border: The line around the element.
Margin: The space between the border and the other elements on the page.

The following diagram illustrates the CSS box model:

[
    Margin
    [
        Border
        [
            Padding
            [
                Content
            ]
        ]
    ]
]

The width and height of an element are determined by the content area. The padding, border, and margin are added to the content area to determine the total width and height of the element.

Controlling the CSS Box Model

You can use CSS to control the size and position of the different parts of the box model. For example, you can use the width and height properties to control the size of the content area. You can use the padding property to control the size of the padding, and the border property to control the size and style of the border. You can use the margin property to control the size of the margin.

Try of box shadow generator with examples.

Task

Give form a box-shadow with values 2px 2px 4px rgba(0, 0, 0, 0.2). Refer to the box shadow generator mentioned above for syntax. Run the code to see the final results and experiment with the code to get used to it.

<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
    <style>
        body {
            line-height: 1.6;
            background-image: url(https://learnwith.tumkurlab.com/wp-content/uploads/2023/10/19449741-scaled.jpg);
            background-size: cover;
        }
        header { 
            color: #fff;
            background-color: #333;
            font-family: 'Arial', sans-serif;
            padding: 20px;
        }
        ul { 
            color: #007BFF;
            font-family: 'Roboto', sans-serif;
            font-weight: bold;
            margin: 10px;
         }
        ul li {
            margin: 5px 0;
        }
        ol {
            border: 2px solid #ccc;
            padding-left: 20px;
        }
         ol li {
            font-style: italic;
         }
         header h1 { 
            font-size: 36px;
            line-height: 1.2;
        }
         h1, footer {
           text-align: center;
        }
        form {
            background-color: #f2f2f2; /* Light gray */
            border-radius: 10px;
            width: 80%;
            margin: 0 auto;
            padding: 10px;
            /* Add a box shadow below */
        }
     </style>
</head>
<body data-rsssl=1>
    <header>
        <h1>Welcome to <i>My Portfolio<i/></h1>
        <img decoding="async" src="https://learnwith.tumkurlab.com/wp-content/uploads/2023/09/pexels-cong-h-1404819.jpg" alt="Cat the Dev." />
    </header>
    <section>
    <h2>Skills</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</section>
<section>
    <h2>Projects</h2>
    <ol>
        <li>Portfolio Website</li>
        <li>E-commerce App</li>
        <li>Blog Website</li>
    </ol>
</section>
<section>
    <h2>Education</h2>
    <table border="1" cellpadding="10" cellspacing="5">
    <tr>
        <th>Position</th>
        <th>Company</th>
        <th>Duration</th>
    </tr>
    <tr>
        <td>Web Developer</td>
        <td>TumkurLab</td>
        <td>2020-2022</td>
    </tr>
</table>
</section>
<section>
    <h2>Contact Me</h2>
    <form action="">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="Submit">
</form>
</section>
    <footer>
        © 2023 My Portfolio. Created by <a href="https://example.com">Your Name</a>
    </footer>
</body>

Conclusion

The CSS box model is a way of representing the four sides of an HTML element: the content, the padding, the border, and the margin. By understanding the box model, you can control the appearance of your web pages in more detail.

Here are some tips for using the box model:

Use the padding property to add space around the content of an element.
Use the border property to add a line around the content of an element.
Use the margin property to add space around the element itself.
Use the width and height properties to set the size of the element.

CSS The Box Model

Add LearnWebstack.com to your Homescreen!