How do I get rid of these weird spaces?

Question

.top {
        color:#ffffff;
        font-family: 'Trebuchet MS';
        margin:0;
    }

    #Philata {
        background-color: #0431B4;
        list-style-type: none;
        margin: 0;
        padding: 20px;
        font-family: 'trebuchet MS';
        display:flex;
        gap:1em;
        color:#ffffff;
        justify-content: right;
        align-items: center;
    }


    body {
        margin:0;
        background-color: #ffffff;
        font-family: 'trebuchet MS';

    }

    .title {
        background-color: #0431B4;
        color:#ffffff;
        margin:0px;
    }

    footer {
        background-color: #595859;
        color: #ffffff;
        margin:0px;
        font-family: 'trebuchet MS';

    }

    .curved {
        background-color: #ffffff;
        color:#000000;
        text-align: center;

    }

    .curved h1 {
        font-size: 6rem;
        font-family: 'trebuchet MS';


    }

    ul {
        background-color: #0431B4;
        list-style-type: none;
        margin: 0;
        padding: 20px;
        font-family: 'trebuchet MS';
        display:flex;
        gap:1em;
        color:#ffffff;
        justify-content: left;
        align-items: center;
        
    }
    
    ul li:hover {
        background-color: #4164ff;
        transition: 0.3s ease;

    }

<body>
<header>
    <ul>
        
        <h1>Philata <small><small><small><em>bringing stamp collecting into the modern era</em></small></small></small></h1>
        <div id="Philata">
        <li><a href="default.asp" style=" color: #ffffff; text-decoration: none">Home</a></li>
        <li><a href="contact.asp" style=" color: #ffffff; text-decoration: none">Contact</a></li>
        <li><a href="about.asp" style=" color: #ffffff; text-decoration: none">About</a></li>
        </div>
    </ul>
</header>

<main>
    <div class="curved">
        <h1>Philata - Website Under Construction!</h1>
        <p>sdasdasdasdawd fffffffffffffffffewefwe fwefwefwefwef</p>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#0431b4" fill-opacity="1" d="M0,128L34.3,122.7C68.6,117,137,107,206,128C274.3,149,343,203,411,202.7C480,203,549,149,617,154.7C685.7,160,754,224,823,224C891.4,224,960,160,1029,122.7C1097.1,85,1166,75,1234,69.3C1302.9,64,1371,64,1406,64L1440,64L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"></path></svg>
    </div>
    <div id="title" class="title">
        <p>Stamp Collecting</p>
    </div>

</main>
<footer>
    <p>Copyright © 2022 Philata</p>
    <p><a href="mailto:0@gmail.com" style=" color: #ffffff; text-decoration: none">0@gmail.com</a></p>
    <p>Proudly hosted by Github Pages.</p>
  </footer>

</body>

enter image description here

Hi guys! I shared my file and an image of the site as it is now. I wanted to know how I would be able to get rid of those awkward spaces that I pointed to with red arrows in the image. Thanks in advance.

Sorry, I haven't used stackoverflow before. I tried pasting a link to my repository but it seems that it got converted into code — Jonathan Li, Aug 15 '22 at 23:18
A user edited your question to include the code instead of a link to the repo. I was asking for you to [edit] your question to include what things you have tried to solve your problem so far. — Ethan, Aug 15 '22 at 23:24

score 0 · Answer 1 · answered Aug 15 '22 at 23:29

I got it to work and match your expectations. There are 2 places where I've made change in CSS file only.

Now because we're removing margin and padding from ALL elements on the page, you'd want to explicitly expand those that you need to have margin/padding for.

Please take a look below:

/* added this */

* {
    padding: 0;
    margin: 0;
}

/* ----- */

.top {
    color: #ffffff;
    font-family: 'Trebuchet MS';
    margin: 0;
}



#Philata {
    background-color: #0431B4;
    list-style-type: none;
    margin: 0;
    padding: 20px;
    font-family: 'trebuchet MS';
    display: flex;
    gap: 1em;
    color: #ffffff;
    justify-content: right;
    align-items: center;
}


body {
    margin: 0;
    background-color: #ffffff;
    font-family: 'trebuchet MS';

}

.title {
    background-color: #0431B4;
    color: #ffffff;
    margin: 0px;
}

footer {
    background-color: #595859;
    color: #ffffff;
    margin: 0px;
    font-family: 'trebuchet MS';

}

/* updated this */
.curved {
    background-color: #ffffff;
    color: #000000;
    text-align: center;
    display: grid;
}

/* ----- */

.curved h1 {
    font-size: 6rem;
    font-family: 'trebuchet MS';


}

ul {
    background-color: #0431B4;
    list-style-type: none;
    margin: 0;
    padding: 20px;
    font-family: 'trebuchet MS';
    display: flex;
    gap: 1em;
    color: #ffffff;
    justify-content: left;
    align-items: center;

}

ul li:hover {
    background-color: #4164ff;
    transition: 0.3s ease;

}

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <ul>

            <h1>Philata <small><small><small><em>bringing stamp collecting into the modern
                                era</em></small></small></small></h1>
            <div id="Philata">
                <li><a href="default.asp" style=" color: #ffffff; text-decoration: none">Home</a></li>
                <li><a href="contact.asp" style=" color: #ffffff; text-decoration: none">Contact</a></li>
                <li><a href="about.asp" style=" color: #ffffff; text-decoration: none">About</a></li>
            </div>
        </ul>
    </header>

    <main>
        <div class="curved"">
            <h1>Philata - Website Under Construction!</h1>
            <p>sdasdasdasdawd fffffffffffffffffewefwe fwefwefwefwef</p>
            <svg xmlns=" http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="test">
            <path fill="#0431b4" fill-opacity="1"
                d="M0,128L34.3,122.7C68.6,117,137,107,206,128C274.3,149,343,203,411,202.7C480,203,549,149,617,154.7C685.7,160,754,224,823,224C891.4,224,960,160,1029,122.7C1097.1,85,1166,75,1234,69.3C1302.9,64,1371,64,1406,64L1440,64L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z">
            </path>
            </svg>
        </div>
        <div id="title" class="title">
            <p>Stamp Collecting</p>
        </div>

    </main>
    <footer>
        <p>Copyright © 2022 Philata</p>
        <p><a href="mailto:0@gmail.com" style=" color: #ffffff; text-decoration: none">0@gmail.com</a></p>
        <p>Proudly hosted by Github Pages.</p>
    </footer>

</body>

</html>

IT goldman · Answer 2 · 2022-08-16T11:25:22.057

It was caused by the margin on the <p> element. But there were another 4px that wasn't accounted for so I worked around that. I replaced the margins with paddings to keep the spacing. I also used the rem units because that's what I could see in the dev tools.

Update: The 4 px (or 0.25rem) were accounted for the svg being inline instead of block as suggested in the comments. So improved solution follows.

So I added this:


main svg {
  display:block;
}
.title p {
  margin-top: 0rem;
  margin-bottom: -1rem;
  padding-top: 0rem;
  padding-bottom: 1rem;
}

And the result:

.top {
  color: #ffffff;
  font-family: 'Trebuchet MS';
  margin: 0;
}

#Philata {
  background-color: #0431B4;
  list-style-type: none;
  margin: 0;
  padding: 20px;
  font-family: 'trebuchet MS';
  display: flex;
  gap: 1em;
  color: #ffffff;
  justify-content: right;
  align-items: center;
}

body {
  margin: 0;
  background-color: #ffffff;
  font-family: 'trebuchet MS';
}

.title {
  background-color: #0431B4;
  color: #ffffff;
  margin: 0px;
}

footer {
  background-color: #595859;
  color: #ffffff;
  margin: 0px;
  font-family: 'trebuchet MS';
}

.curved {
  background-color: #ffffff;
  color: #000000;
  text-align: center;
}

.curved h1 {
  font-size: 6rem;
  font-family: 'trebuchet MS';
}

ul {
  background-color: #0431B4;
  list-style-type: none;
  margin: 0;
  padding: 20px;
  font-family: 'trebuchet MS';
  display: flex;
  gap: 1em;
  color: #ffffff;
  justify-content: left;
  align-items: center;
}

ul li:hover {
  background-color: #4164ff;
  transition: 0.3s ease;
}

main svg {
  display:block;
}
.title p {
  margin-top: 0rem;
  margin-bottom: -1rem;
  padding-top: 0rem;
  padding-bottom: 1rem;
}

<body>
  <header>
    <ul>

      <h1>Philata <small><small><small><em>bringing stamp collecting into the modern era</em></small></small>
        </small>
      </h1>
      <div id="Philata">
        <li><a href="default.asp" style=" color: #ffffff; text-decoration: none">Home</a></li>
        <li><a href="contact.asp" style=" color: #ffffff; text-decoration: none">Contact</a></li>
        <li><a href="about.asp" style=" color: #ffffff; text-decoration: none">About</a></li>
      </div>
    </ul>
  </header>

  <main>
    <div class="curved">
      <h1>Philata - Website Under Construction!</h1>
      <p>sdasdasdasdawd fffffffffffffffffewefwe fwefwefwefwef</p>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#0431b4" fill-opacity="1" d="M0,128L34.3,122.7C68.6,117,137,107,206,128C274.3,149,343,203,411,202.7C480,203,549,149,617,154.7C685.7,160,754,224,823,224C891.4,224,960,160,1029,122.7C1097.1,85,1166,75,1234,69.3C1302.9,64,1371,64,1406,64L1440,64L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"></path></svg>
    </div>
    <div id="title" class="title">
      <p>Stamp Collecting</p>
    </div>

  </main>
  <footer>
    <p>Copyright © 2022 Philata</p>
    <p><a href="mailto:0@gmail.com" style=" color: #ffffff; text-decoration: none">0@gmail.com</a></p>
    <p>Proudly hosted by Github Pages.</p>
  </footer>

</body>

How do I get rid of these weird spaces?

2 Answers2