0

<style>

      body {
        background: rgb(36, 36, 36);
        color: white;
        padding: 0;
        margin: 0;
        text-align: center;
      }

      @font-face {
        font-family: TypoRoundRegular;
        src: url(fonts/Typo_Round_Regular_Demo.otf);
      }

      * {
        font-family: "TypoRoundRegular";
      }

    </style>
  </head>
  <body>

<h1 style="font-size:50px;"> Aetherian's Portfolio</h1>
<p style="line-height: 0;">Discord: Aetherian#6664</p>

  </body>
</html>

Like said in the title, why is the space between the big header "Aetherian's Portfolio and "Discord: Aetherian#6664" so big? https://gyazo.com/1c8b6c6271ebd9d5eab59ba637fb44de I would like to get the bottom text much closer to the header text.

Aetherian
  • 1
  • 1
  • Both `h1` and `p` elements have vertical margins by default. Setting their margins to zero will tighten them up. – ray Sep 02 '22 at 22:20

2 Answers2

0

You can use your browser's developer tools to investigate what's going on. You will see that h1 has a certain margin-bottom. To reduce it, add:

h1{
    margin: 0;
}
jp-jee
  • 1,502
  • 3
  • 16
  • 21
0

This is because of the default bounding box of the two elements.

Bounding box example

As you can see from the example (from firefox dev tools), there is the element itself, and the padding, border and margin.

If you reduce the bottom-margin of h1 or reduce the top-margin of p, they will move closer together. These values can go into the negative if necessary.

Jess
  • 177
  • 5