如何消除img和div之间的间隙

Question

display: block适用于包含图像的部分，但不适用于只有背景色的部分。我尝试了不同的显示类型，添加负边距对我来说不是解决方案，因为这会破坏我的脚本。

/* 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%;
}

Answer 1

您可以做的是，也许您可以在CSS开始时这样做。

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

这将消除所有意想不到的空白。