Why doesn't this margin for paragraph tag work?-CodePudding

I'm following a tutorial on Youtube by Traversy Media to build a responsive website

Right around here he adds a top and bottom margin in css at line number on line number 80, which works for him.

But for some reason, even though I'm following the same code, except for the colour, it is not working for me. Why? I even tried giving margin as 200px, it still has no effect.

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

:root{
  --primary-colour: #B37A4C;
  --secondary-colour: #FFFDDD;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Lato', sans-serif;
  color: var(--secondary-colour);
  line-height: 1.6;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--secondary-colour);
}

h1, h2{
  font-family: 300;
  line-height: 1.2;
  margin: 10px 0;
}

p {
  margin: 10px 0;
}

img {
  width: 100%;
}

/* Navbar Styling */
.navbar {
  background-color: var(--primary-colour);
  color: var(--secondary-colour);
  height: 70px;
}

.navbar .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.navbar ul{
  display: flex;

}

.navbar a{
  padding: 10px;
  margin: 0, 5px;
}

.navbar a:hover{
  border-bottom: 2px var(--secondary-colour) solid;
}

/* Showcase */
.showcase{
  height: 400px;
  background-color: var(--primary-colour);
  color: var(--secondary-colour);
  position: relative;
}

.showcase h1{
  font-size: 40px;
}

/******* This is not working *********/
.showcase p{
  margin: 200px, 0;
} 

/* Utility */
.container {
  max-width: 1100px;
  margin: 0 auto;
  overflow: auto;
  padding: 0 40px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

<!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" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
    integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="css/styles.css" />
  <title>Loruki | Cloud Hosting For Everyone</title>
</head>

<body>
  <!-- Navbar -->
  <div >
    <div >
      <h1 >Loruki.</h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="features.html">Features</a></li>
          <li><a href="docs.html">Docs</a></li>
        </ul>
      </nav>
    </div>
  </div>

  <!-- Section -->
  <section >
    <div >
      <div >
        <h1>Easier Development</h1>
        <p>Deploy web apps of all kinds, from large scale enterprise APIs to static
          websites for individuals. Fill out the form to try a demo of our platform
        </p>
        <a href="features.html" >Read More</a>
      </div>

      <div >
        <h2>Request Demo</h2>
        <form>
          <div >
            <input type="text" name="name" placeholder="Name" required> 
          </div>
          <div >
            <input type="text" name="company" placeholder="Company Name" required> 
          </div>
          <div >
            <input type="email" name="email" placeholder="Email" required> 
          </div>

          <input type="submit" value="Send" >
        </form>
      </div>
    </div>
  </section>
</body>

</html>

CodePudding user response：

You have a typo in there, compare these two:

/* wrong */
margin: 200px, 0;
/* corrent */
margin: 200px 0;

There should be no comma.