Why does my website create extra space when adding elements in HTML?-CodePudding

When I proceed to add elements like images, or more words in the lorem ipsum generator, it seems like some space is created. I have not had any luck finding it in the inspect mode. Also occurs when adding an image. But the example shown occurs when using for example the lorem ipsum generator, creating 100 words, and suddenly there spawns space all over the place.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header {
  grid-area: 1 / 1 / 2 / 6;
  display: flex;
  justify-content: center;
  background-image: linear-gradient(141deg, #1fc8db 51%, #2cb5e8 75%);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  height: fit-content;
  padding: 25px 0;
  border-bottom: solid white 2px;
}

.menu {
  grid-area: 2 / 1 / 3 / 6;
  background-image: linear-gradient(141deg, #1fc8db 51%, #2cb5e8 75%);
  height: fit-content;
  padding: 20px 0;
}

ul {
  list-style-type: none;
  text-decoration: none;
  width: 100%;
  text-align: center;
}

.menu li {
  padding-left: 30px;
  padding-right: 30px;
}

li {
  display: inline;
}

ul li a {
  color: white;
  text-decoration: none;
  font-size: 24px;
}

ul li a:hover {
  text-decoration: underline;
}

.side {
  grid-area: 3 / 1 / 5 / 2;
}

.main {
  grid-area: 3 / 2 / 5 / 6;
  float: left;
  display: flex;
  justify-content: left;
}

.side,
.main {
  padding: 10px;
}

.footer {
  grid-area: 5 / 1 / 6 / 6;
  display: flex;
  justify-content: center;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

<div >
  <div >Øving 1</div>
  <div >
    <ul>
      <li><a href="default.asp">Hjem</a></li>
      <li><a href="news.asp">Om oss</a></li>
      <li><a href="contact.asp">Kontakt</a></li>
      <li><a href="about.asp">Bestill</a></li>
    </ul>
  </div>
  <div >
    <h3>Side</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error suscipit nesciunt quos porro ex dignissimos unde officia. Similique, molestiae cum ullam quam placeat quisquam sunt ratione suscipit officiis, soluta dolorem.</p>
  </div>
  <div >
    <div >
      <h3>Content</h3>
      <p>test</p>
    </div>
    <div >

    </div>
  </div>
  <div >
    <h2>Copyright © Erik Skjellevik 2022</h2>
  </div>
</div>

CodePudding user response：

According to my knowledge the space creation is by default property of the software so because of this your website create extra space. But to solve this problem you can use margin and padding = 0 after that no space will be created in your website

CodePudding user response：

The extra space is by default property. For fixing it, set the margin and padding to 0. OR For different resolutions, use media queries and for different pixels, you have to set it.

CodePudding user response：

You must change that in CSS file:

 //OLD
 .grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
 //NEW
.grid-container {
    display: grid;
  }