-1

I want to be able to remove, or at least control the size of the gap between <header> and <main>. I've seen other people asking very similar questions, and it came down to the margins of the heading they had at the top (h1 or whatever), but I triple checked that mine were set to 0.

I've already tried setting pretty much every margin I could think of to "0.' I also messed around with the paddings a bit. I am very new to HTML and CSS, this being part of an assignment for an introductory course. We're not actually even to this stuff yet, I'm just being an over-achiever.

html {
  font-size: 100%;
}

body {
  background-color: #6B6B6B;
  padding-bottom: 2 em;
}

#container {
  background-color: #000075;
  color: #BCFFB0;
  max-width: 70%;
  min-height: 100%;
  margin: auto;
  border: 3px solid white;
  position: relative;
}

container a {
  color: #FF8EEE;
}

p,
container a {
  font-size: 125%;
}

main {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0%;
}

h1 {
  font-size: 250%;
  margin-bottom: 0%;
  padding-bottom: 0%;
}

h2 {
  margin-left: -5%;
  font-size: 175%;
  margin-top: 0;
  padding: 0;
}

header p {
  margin-top: 0%;
}

header>* {
  max-width: 95%;
  margin-left: auto;
  margin-top: 0%;
  padding: 0;
}

header,
footer {
  background-color: #38005E;
  color: #00D220;
}

footer {
  position: absolute;
  bottom: 0;
  height: 2 em;
  width: 100%;
}

header a,
footer a {
  color: #1CFFCC;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #2BFF05;
}
<html lang="en-us">

<head>
  <meta charset="UTF-8">
  <title>Lorem Ipsum Dolor Sit Amet| Home</title>
  <link rel="stylesheet" type="text/css" href="styles/style.css">
</head>

<body>
  <div id="container">
    <header>
      <h1> Lorem Ipsum Dolor Sit Amet </h1>

      <nav>
        <p> <a class="active" href="index.html"> Home</a> | <a href="details.html"> Details</a> | <a href="rsvp.html"> RSVP</a></p>
      </nav>

    </header>
    <main>
      <h2> Home </h2>
      <p> Cras sem odio, accumsan ut dui a, pretium volutpat ligula.
      </p>
    </main>
  </div>
</body>
Kaiido
  • 123,334
  • 13
  • 219
  • 285
adam
  • 1
  • 1
  • Add !important; – Waruna Manjula Apr 30 '19 at 02:59
  • Are you aware you can use negative values for margins? Try setting a negative value (ex `margin-top: -5px) to your `.main` class. It will shrink the gap. – Christopher Bennett Apr 30 '19 at 03:01
  • I don't get a gap in either firefox or chrome running this. Are you sure your css isn't cached. Try: – Comet Apr 30 '19 at 03:05
  • @ChristopherBennett Yes, I'm aware of that, I just wanted to get to the root cause o the gap. – adam Apr 30 '19 at 03:12
  • 1
    @Comet The gap was definitlly there. Another user figured out that what was causing it was the bottom margin of the paragraph in my nav. I've fixed it now. You probably didn't see the gap as a gap because the bg color is set for the whole container, so is consistent. It basically just looked like a break that I didn't put there. – adam Apr 30 '19 at 03:14
  • ahh okay i fixed it auto cause i have had this problem. I'll answer – Comet Apr 30 '19 at 03:16
  • @Waruna Manjula Using `!important` is bad style. It should only be used when absolutely necessary. (It doesn't even help here, as the issue is not with the `
    ` or `
    `, but rather with the `

    ` element.) CSS rules with higher specificity should always be preferred over `!important` where possible.

     – Michael Kolber Apr 30 '19 at 05:37
  • @adam If you start using e.g. the built-in `Inspect`, which all browsers have, you would find the cause of simple stuff like this much faster than posting a question. Here's a link for Chrome: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/ – Asons Apr 30 '19 at 07:46

3 Answers3

1

It's margin-bottom on the <p> inside your <nav>.

Use:

header p {
    margin-top: 0;
    margin-bottom: 0;
}
Asons
  • 84,923
  • 12
  • 110
  • 165
francovici
  • 536
  • 6
  • 14
0

From what i've seen in your code, it is the <p> tag that's making the gap, you can set margin-bottom: 0 to achieve your goal.

Before

enter image description here

After

enter image description here

You can always use the browser's built in Developer Mode to check your CSS Styling.

Izzy Ahmad
  • 77
  • 12
The Terrible Child
  • 233
  • 2
  • 12
  • @LGSon of course it will affect all

    tags in the EXAPLE he gave. I just answered what is asked. If a future researcher will see this, it would be lazy if he/she just copy and paste it, you know.

     – The Terrible Child May 02 '19 at 00:51
  • @LGSon those images are for reference. I stated my answer before the images. :) – The Terrible Child May 02 '19 at 00:53
  • @LGSon, not saying this is a good answer. If you knew better answer than this. Better post your answer, or suggest an edit. Lmao. Anyways have a good day. :D – The Terrible Child May 03 '19 at 01:01
-2

The p has a margin below it in your menu. Try:

p, container a{
    font-size: 125%;
    margin-bottom: 0%;
}
Comet
  • 260
  • 2
  • 8
  • The OP asked what is causing it. Answered. Not how to set an id for a particular p tag, which i am sure he knows. – Comet Apr 30 '19 at 08:33