Eine weiße Lücke zwischen zwei div-Elementen

-1

Hier ist der HTML-Code (die weiße Lücke begann so schnell erscheinen, wie ich h3 zur letzten div hinzugefügt):Eine weiße Lücke zwischen zwei div-Elementen

body { 
 
    margin: 0; 
 
    font-family: sans-serif; 
 
    font-weight: 400; 
 
    background-image: url("../images/rooms.jpg"); 
 
} 
 

 
.container { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 

 
header { 
 
    background: #343434; 
 
} 
 

 
header::after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.logo { 
 
    float: left; 
 
    padding: 10px; 
 
} 
 

 
nav { 
 
    float: right; 
 
} 
 

 
nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
nav li { 
 
    padding: 0; 
 
    display: inline-block; 
 
    margin-left: 60px; 
 
    padding-top: 19px; 
 
    position: relative; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    font-size: 13px; 
 
    text-transform: uppercase; 
 
    padding: 1em 0.5em; 
 
} 
 

 
nav a:hover { 
 
    color: yellow; 
 
} 
 

 
.welcome { 
 
    width: 100%; 
 
    height: 250px; 
 
    background: #406295; 
 
} 
 

 
.welcome h3 { 
 
    text-align: center; 
 
}

<header> 
 
    <div class="container"> 
 

 
    <a href="#" class="logo"><img src="images/logo.png" alt=""></a> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#">Room Types</a></li> 
 
     <li><a href="#">Services</a></li> 
 
     <li><a href="#">About Us</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header> 
 
<div class="welcome"> 
 
    <h3>Welcome to</h3> 
 
</div>

Ich bin ziemlich neu zur Webentwicklung und Stackoverflow. Ich entschuldige mich für etwaige Unannehmlichkeiten. Jede Hilfe wird geschätzt. Vielen Dank.

Quelle

2017-09-18 Arnold Heinminthant

haben Sie überprüft, ob es Padding oder Rand gibt, können Sie ein Snippet oder Geige hinzufügen? –

versuchen, zuerst css zurücksetzen. wie '* {padding: 0; Marge: 0;} – shourav

Setzen Sie margin: 0px; auf h3 Tag, um dieses Problem zu beheben. Unten aktualisiert Snippet ..

body{ 
 
    margin:0; 
 
    font-family: sans-serif; 
 
    font-weight: 400; 
 
    background-image: url("../images/rooms.jpg"); 
 
} 
 

 
.container{ 
 
    width: 80%; 
 
    margin : 0 auto; 
 
} 
 
header{ 
 
    background: #343434; 
 
} 
 
header::after{ 
 
    content: ''; 
 
    display: table; 
 
    clear:both; 
 
} 
 

 
.logo{ 
 
    float: left; 
 
    padding:10px; 
 
} 
 
nav{ 
 
    float:right; 
 
} 
 
nav ul{ 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
nav li{ 
 
    padding: 0; 
 
    display: inline-block; 
 
    margin-left: 60px; 
 
    padding-top: 19px; 
 
    position: relative; 
 
} 
 
nav a{ 
 
    text-decoration: none; 
 
    color:white; 
 
    font-size: 13px; 
 
    text-transform: uppercase; 
 
    padding: 1em 0.5em; 
 

 
} 
 
nav a:hover{ 
 
    color:yellow; 
 
} 
 

 
.welcome{ 
 
    width: 100%; 
 
    height: 250px; 
 
    background: #406295; 
 
} 
 

 
.welcome h3{ 
 
    text-align: center; 
 
    margin: 0px; 
 
}

<header> 
 
    <div class="container"> 
 

 
     <a href="#" class = "logo"><img src="images/logo.png" alt=""></a> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="#">Room Types</a></li> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a href="#">About Us</a></li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </header> 
 
    <div class="welcome"> 
 
    <h3>Welcome to</h3> 
 
    </div>

Quelle

2017-09-18 11:05:45

Vielen Dank. Es funktionierte. –

@ArnoldHeinminthant Wenn meine Antwort Ihr Problem gelöst hat, dann akzeptieren Sie es bitte .. –

Sie können versuchen, style="display: inline; margin:0px; padding:0px;" zu Ihrem <h3> Tag hinzufügen.

Quelle

2017-09-18 11:06:12

Entfernen Sie einfach die margin von h3 wie

.welcome h3 { 
    text-align: center; 
    margin:0; 
}

body { 
 
    margin: 0; 
 
    font-family: sans-serif; 
 
    font-weight: 400; 
 
    background-image: url("../images/rooms.jpg"); 
 
} 
 

 
.container { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 

 
header { 
 
    background: #343434; 
 
} 
 

 
header::after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.logo { 
 
    float: left; 
 
    padding: 10px; 
 
} 
 

 
nav { 
 
    float: right; 
 
} 
 

 
nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
nav li { 
 
    padding: 0; 
 
    display: inline-block; 
 
    margin-left: 60px; 
 
    padding-top: 19px; 
 
    position: relative; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    font-size: 13px; 
 
    text-transform: uppercase; 
 
    padding: 1em 0.5em; 
 
} 
 

 
nav a:hover { 
 
    color: yellow; 
 
} 
 

 
.welcome { 
 
    width: 100%; 
 
    height: 250px; 
 
    background: #406295; 
 
} 
 

 
.welcome h3 { 
 
    text-align: center; 
 
    margin:0; 
 
}

<header> 
 
    <div class="container"> 
 

 
    <a href="#" class="logo"><img src="images/logo.png" alt=""></a> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#">Room Types</a></li> 
 
     <li><a href="#">Services</a></li> 
 
     <li><a href="#">About Us</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header> 
 
<div class="welcome"> 
 
    <h3>Welcome to</h3> 
 
</div>

Quelle

2017-09-18 11:06:47

Dies ist auf collapsing margins

Entfernen Sie die margin auf der h3. Ersetzen Sie es durch padding, wenn Sie zwischen der Kopfzeile Platz schaffen und die Hintergrundfarbe beibehalten möchten.

body { 
 
    margin: 0; 
 
    font-family: sans-serif; 
 
    font-weight: 400; 
 
    background-image: url("../images/rooms.jpg"); 
 
} 
 

 
.container { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 

 
header { 
 
    background: #343434; 
 
} 
 

 
header::after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.logo { 
 
    float: left; 
 
    padding: 10px; 
 
} 
 

 
nav { 
 
    float: right; 
 
} 
 

 
nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
nav li { 
 
    padding: 0; 
 
    display: inline-block; 
 
    margin-left: 60px; 
 
    padding-top: 19px; 
 
    position: relative; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    font-size: 13px; 
 
    text-transform: uppercase; 
 
    padding: 1em 0.5em; 
 
} 
 

 
nav a:hover { 
 
    color: yellow; 
 
} 
 

 
.welcome { 
 
    width: 100%; 
 
    height: 250px; 
 
    background: #406295; 
 
} 
 

 
.welcome h3 { 
 
    text-align: center; 
 
    margin-top: 0; 
 
}

<header> 
 
    <div class="container"> 
 

 
    <a href="#" class="logo"><img src="images/logo.png" alt=""></a> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#">Room Types</a></li> 
 
     <li><a href="#">Services</a></li> 
 
     <li><a href="#">About Us</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header> 
 
<div class="welcome"> 
 
    <h3>Welcome to</h3> 
 
</div>

Quelle

2017-09-18 11:07:22 sol

Entweder gelten margin-top:0 für H3 -Tag oder eine float:left für .welcome Beide

gelten beheben Ihr Problem

Quelle

2017-09-18 11:13:42

Eine andere Möglichkeit ist eine Regel von anzuwenden overflow: auto an die .welcome div ... und so einen neuen Block Formatierungskontext erstellen xt und die kollabierenden Ränder vermeiden.

Bearbeiten: Lassen Sie uns ein wenig mehr Kontext hinzufügen. In the spec können Sie lesen, dass angrenzende Ränder unter bestimmten Umständen zusammenbrechen. Insbesondere müssen die Ränder zu Blöcken auf Blockebene gehören, die an demselben Blockformatierungskontext teilnehmen.

Auch wenn .welcome und h3 Blockebenen in Ihrem Beispiel sind, stellt keiner automatisch einen neuen Blockformatierungskontext her (dh sie nehmen am selben Blockformatierungskontext teil, was bedeutet, dass ihre Ränder zusammenfallen). Betrachten wir wieder the spec, sehen wir, dass einige der Möglichkeiten, einen neuen Blockformatierungskontext zu etablieren, ein float, ein absolut positioniertes Element oder ein Blockfeld mit der Eigenschaft overflow ist, die auf etwas anderes als visible gesetzt ist.

Deshalb funktionieren die Vorschläge bezüglich overflow: auto oder floating eines der Elemente.Mein Verständnis ist, dass, wenn wir .welcome einen neuen Block Formatierungskontext erstellen, der Kontext, an dem es teilnimmt, unterscheidet sich von dem, den es selbst etabliert. Das Entfernen des Randes (möglicherweise durch das Ersetzen durch Auffüllen) ist eine andere Möglichkeit, das Problem zu umgehen.

Quelle

2017-09-18 11:20:29 klumme

Eine weiße Lücke zwischen zwei div-Elementen

Antwort

Verwandte Themen