0

why is there space at the top of my header and above my body? overview

h1 breakdown

header breakdown

body {
  background-color: #efefef;
  font-family: "verdana";
  max-width: 1000px;
  border: solid #ffffff 3px;
  margin: auto;
}

#container {
  background-color: #8a8a8a;
}

#header {
  background-color: #8a8a8a;
}

h1 {
  background-color: #F47D31;
  color: #FFFFFF;
  text-align: center;
  font-family: "verdana";
  text-transform: uppercase;
  padding: 10px 0 10px 0;
}

h2 {
  background-color: #F47D31;
  color: #ffffff;
  font-family: "verdana";
  text-transform: uppercase;
  text-align: center;
  padding: 10px 0 10px 0;
}

h3 {
  background-color: #F47D31;
  color: #ffffff;
  font-family: "verdana";
  text-transform: uppercase;
  text-align: center;
  padding: 10px 0 10px 0;
}

p {
  font-family: "verdana";
  line-height: 1.5em;
  color: #ffffff;
  text-align: justify;
}

#nav {
  display: block;
  width: 25%;
  float: left;
}

#nav ul {
  list-style-type: none;
}

#nav a:link, #nav a:visited {
  display: block;
  border-bottom: 2px solid #fff;
  padding: 10px;
  text-decoration: none;
  font-weight: bold;
  margin: 5px;
}

#nav a:hover {
  color: white;
  background-color: #F47D31;
  text-decoration: underline;
}

hr {
  border: solid #efefef 1px;
}

table {
  padding: 10px;
}

tr:nth-child(even) {
  background-color: #E9EAE8;
  color: #2a2a2a;
}

tr:nth-child(odd) {
  background-color: #ffffff;
  color: #2a2a2a;
}

tr:hover {
  background-color: #F47D31;
}

#products_list {
  list-style: none;
  padding: 20px
}

figure {
  display: block;
  width: 202px;
  height: 170px;
  float: left;
  margin: 10px;
  background-color: #e7e3d8;
  padding: 9px;
}

figure img {
  width: 200px;
  height: 150px;
  border: 1px solid #d6d6d6;
}

figcaption {
  text-align: center;
  color: #F47D31;
}

fieldset {
  background-color: #f1f1f1;
  border: none;
  border-radius: 2px;
  margin-bottom: 0px;
  overflow: hidden;
  padding: 0 10px;
}

ul {
  background-color: #fff;
  border: 1px solid #eaeaea;
  list-style: none;
  margin: 12px;
  padding: 12px;
}

li {
  margin: 0.5em 0;
}

label {
  display: inline-block;
  padding: 3px 6px;
  text-align: right;
  width: 150px;
  vertical-align: top;
}

.paragraph {
  padding: 0 10px 0 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Innovative Multimedia Seminar 1</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />

</head>

<body>

  <div id="header">
    <h1>Hello World</h1>
    <h2>Hello World 2</h2>
    <h3>Innovative Multimedia Rocks!</h3>
  </div>

  <div id="container">

    <div id="nav">
      <!--Add Links Here -->
      <ul>
        <li><a href="index.html"> Home Page </a></li>
        <li><a href="products.html"> Products Page </a></li>
        <li><a href="register.html"> Register Page </a></li>
        <li><a href="https://www.shu.ac.uk/‎"> SHU website homepage </a></li>
      </ul>
    </div>

    <div>

      <figure>
        <img src="img/image1.jpg" alt="Horses in a field">
        <figcaption>
          A horse and two foals
        </figcaption>
      </figure>

      <figure>
        <img src="img/image2.jpg" alt="Flowers growing">
        <figcaption>
          Three Flowers Growing
        </figcaption>
      </figure>

      <figure>
        <img src="img/image3.jpg" alt="Butterfly on flower">
        <figcaption>
          Butterfly on flower
        </figcaption>
      </figure>

      <div class="paragraph">
        <p>
          Lorem ipsum dolor sit amet, oporteat hendrerit id pro. His munere virtute facilis ex. Detracto concludaturque vel ea, quo id iusto deseruisse accommodare. Ea sit habeo audiam concludaturque, an usu vero numquam eruditi. Ex scripta neglegentur pri, timeam
          omittam theophrastus ne mel, mea simul perpetua no.
        </p>

        <hr>

        <p>
          Vel aliquid fierent te, per quas elaboraret in. Eu mei omittam prodesset, vel liber complectitur concludaturque an. Nihil choro at qui, rebum legendos mei ex, vis ex choro quaeque reprimique. No pri bonorum expetenda liberavisse, sed ut erat senserit.
        </p>

        <hr>

        <p>
          No duo habemus vivendum euripidis. Et mutat populo constituto per, veniam populo honestatis sit ex. Propriae lucilius at ius, qui tale invidunt te. In vitae probatus explicari nec, ex prima delenit moderatius sit, putent mentitum gloriatur pro in. Justo
          volumus eum an.
        </p>
      </div>

    </div>
  </div>
</body>

</html>
connexo
  • 53,704
  • 14
  • 91
  • 128
Matthew Smith
  • 11
  • 9
  • Please paste the relevant code into the question as text. –  Oct 11 '18 at 17:41
  • it is on the images i have attached? i dont understand why there is space separating the body and other items. – Matthew Smith Oct 11 '18 at 17:46
  • 1
    Code in images is not very useful. We can't copy and paste it and play with it to help solve the issue. Code in images is also not indexed by search engines. Anytime you ask a question on SO, code in images is generally not going to be accepted. –  Oct 11 '18 at 17:54
  • i have added the code – Matthew Smith Oct 11 '18 at 17:56
  • Yes, I saw. I was explaining why code in images isn't helpful, since you asked. –  Oct 11 '18 at 17:57

2 Answers2

0

Just remove the margin from the h1 by putting margin-top: 0;

h1 {
  background-color: #F47D31;
  color: #FFFFFF;
  text-align: center;
  font-family: "verdana";
  text-transform: uppercase;
  padding: 10px 0 10px 0;
  margin-top: 0;
}

Code Pen Example

and I'm not sure what you mean by the body having padding.

D S Bailey Freelancer
  • 9
  • 4
  • 1
    yes this worked. Not a clue why margins are being added all over my document without them being declared. Thanks for your help! – Matthew Smith Oct 11 '18 at 21:15
-1

As you can see in the h1 breakdown picture, the h1 tag gets its styling from styles.css, and there is padding set to 10 pixels above and under the h1 tag.

So you could try to remove the padding-style from styles.css and see if it removes the space. Or yet easier, just uncheck the checkbox for the padding style in the DevTools shown in the picture.

Sakarias Stenbäck
  • 89
  • 1
  • 4