CODEWITHSUNDEEP
htmlcss
Erik Skjellevik
Erik Skjellevik

Reputation: 23

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

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 class="grid-container">
  <div class="header">Øving 1</div>
  <div class="menu">
    <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 class="side">
    <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 class="main">
    <div class="p">
      <h3>Content</h3>
      <p>test</p>
    </div>
    <div class="img">

    </div>
  </div>
  <div class="footer">
    <h2>Copyright © Erik Skjellevik 2022</h2>
  </div>
</div>

Upvotes: 0

Views: 89

Answers (3)

Mateuszprogrammer1302
Mateuszprogrammer1302

Reputation: 202

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;
  }

Upvotes: 1

Ankit
Ankit

Reputation: 102

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.

Upvotes: 0

Augstay Gupta
Augstay Gupta

Reputation: 1

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

Upvotes: 0

Related Questions