<style> element in HTML visually disrupting a div INSIDE my <body> how?-CodePudding

<!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>DOM about</title>
    <!-- <style>
        .red {
        background: red;
        color: white;
        text-transform: uppercase;
        font-size: 2rem;
      }
      .blue {
        background: blue;
        color: white;
        text-transform: capitalize;
        font-size: 2rem;
      }
      .title {
        background: blue;
        color: white;
        font-size: 3rem;
        text-transform: capitalize;
      }
      .btn {
        background: #f15025;
        color: white;
        font-size: 1.2rem;
        border: none;
      }
      a {
        display: inline-block;
        margin-top: 100vh;
      }
    </style> -->
  </head>
  <body>
    <div class="container">
      <ul class="list-items">
        <li class="item"><a href="#" class="link">link</a></li>
        <li class="item"><a href="#" class="link">link</a></li>
        <li class="item"><a href="#" class="link">link</a></li>
      </ul>
    </div>
    <!-- Javascript -->
    <script src="app.js"></script>
  </body>
</html>

When I run this code I get no issues on my live server concerning the displaying of my links on top of eachother in the div.

BUT when I uncomment the styles section my lists are suddenly spread around huge individual containers. I don't understand how that is possible. Can someone please clarify what context/syntax I am forgetting.

I just started learning how to code this week so forgive me if this is obvious.

CodePudding user response：

The Problem was the margin-top: 100vh; for a tag.

<!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>DOM about</title>
        <style>
            .red {
            background: red;
            color: white;
            text-transform: uppercase;
            font-size: 2rem;
          }
          .blue {
            background: blue;
            color: white;
            text-transform: capitalize;
            font-size: 2rem;
          }
          .title {
            background: blue;
            color: white;
            font-size: 3rem;
            text-transform: capitalize;
          }
          .btn {
            background: #f15025;
            color: white;
            font-size: 1.2rem;
            border: none;
          }
          a {
            display: inline-block;
            /* margin-top: 100vh; Thats the problem */
          }
        </style>
      </head>
      <body>
        <div class="container">
          <ul class="list-items">
            <li class="item"><a href="#" class="link">link</a></li>
            <li class="item"><a href="#" class="link">link</a></li>
            <li class="item"><a href="#" class="link">link</a></li>
          </ul>
        </div>
        <!-- Javascript -->
        <script src="app.js"></script>
      </body>
    </html>

CodePudding user response：

Your links are spreading because you are giving margin-top: 100vh. So each a tag gets margin-top of 100vh. The problem is in the following place in style tag.

  a {
    display: inline-block;
    margin-top: 100vh;
  }