CSS Margin

CSS margin is the space between the border of an element and the other elements on the page. It can be used to create a margin of space around an element, or to make an element appear larger or smaller.

Margin is specified using the margin property. The margin property can take up to four values, one for each side of the element:

margin-top
margin-right
margin-bottom
margin-left

If you only specify one value, it will be applied to all four sides of the element. If you specify two values, they will be applied to the top and bottom, and the left and right, respectively. If you specify three values, the first value will be applied to the top, the second value to the left and right, and the third value to the bottom. If you specify four values, they will be applied to the top, right, bottom, and left, respectively.

You can specify margin values in pixels, percentages, or other CSS units. For example, the following code would add a 10px margin to all sides of the element:

.element {
  margin: 10px;
}

You can also use the margin property to add different amounts of margin to different sides of the element. For example, the following code would add a 10px margin to the top and bottom of the element, and a 20px margin to the left and right:

.element {
  margin: 10px 20px;
}

Task

Give the ul a margin of 10px, add a selector ul li with a margin of 5px 0, and form with a margin of 0 auto values. 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://www.learnwebstack.com/wp-content/uploads/2023/10/19449741-scaled.jpg);
            background-size: cover;
        }
        header { 
            color: #fff;
            background-color: #333;
            font-family: 'Arial', sans-serif;
        }
        /* Change the code below */
        ul { 
            color: #007BFF;
            font-family: 'Roboto', sans-serif;
            font-weight: bold;
         }
         
         /* Change the code above */
         ol {
            border: 2px solid #ccc;
         }
         ol li {
            font-style: italic;
         }
         header h1 { 
            font-size: 36px;
            line-height: 1.2;
        }
         h1, footer {
           text-align: center;
        }
        /* Change the code below */
        form {
            background-color: #f2f2f2; /* Light gray */
            width: 80%;
            border-radius: 10px;
        }
        /* Change the code above */
     </style>
</head>
<body data-rsssl=1>
    <header>
        <h1>Welcome to <i>My Portfolio<i/></h1>
        <img decoding="async" src="https://www.learnwebstack.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>

CSS Margin

Add LearnWebstack.com to your Homescreen!