CODEWITHSUNDEEP
htmlcss
Jannis N
Jannis N

Reputation: 61

How do I get rid of the gaps between a img and a div?

display: block worked for the sections that have images in them but didn't for the sections where I just have a background color. I tried different display types and adding a negative margin is no solution for me because that would break my scripts.

/* SECTION HOME */
#home {
  height: 100% !important;
  display: flex;
}

.sectionhome::before {
  /* setzt die richtige Höhe damit die Navbar das Bild nicht blockiert */
  display: block;
  content: " ";
  margin-top: -128px;
  height: 128px;
  visibility: hidden;
  pointer-events: none;
}

#homebild {
  display: block;
}

/* SECTION WIR-UEBER-UNS */
#wir-ueber-uns {
  height: 100% !important;
  display: flex;
}

.sectionwir-ueber-uns::before {
  display: block;
  content: " ";
  margin-top: -80px;
  height: 80px;
  visibility: hidden;
  pointer-events: none;
}

#wir-ueber-unsbild {
  display: block;
}

/* SECTION AKTIONEN */
#aktionen {
  height: 100% !important;
  display: flex;
}

.sectionaktionen::before {
  display: block;
  content: " ";
  margin-top: -80px;
  height: 80px;
  visibility: hidden;
  pointer-events: none;
}

#aktionenbild {
  display: block;
}

/* SECTION TERMINVEREINBARUNG */
#terminvereinbarung {
  height: 100% !important;
  display: flex;
}

.sectionterminvereinbarung::before {
  display: block;
  content: " ";
  margin-top: -80px;
  height: 80px;
  visibility: hidden;
  pointer-events: none;
}

#terminvereinbarungbild {
  display: block;
}

/* SECTION INFOS */
#infos {
  height: 1200px !important;
  display: flex;
  z-index: -5;
  position: relative;
  background-color: darkblue;
}

.sectioninfos::before {
  display: block;
  content: " ";
  margin-top: -80px;
  height: 80px;
  visibility: hidden;
  pointer-events: none;
}

#map {
  position: absolute;
  bottom: 6%;
}

Upvotes: 0

Views: 56

Answers (1)

Cadet Hasib
Cadet Hasib

Reputation: 47

What you may do is maybe you can do this at the start of your CSS.

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

That is going to get rid of all the unintended margins and spaces.

Upvotes: 1

Related Questions