Wie kann ich mein div bis zum Rand meines Bildes ausrichten?

Question

Ich habe Probleme, den Rand meines div mit einer Grenze an den Rand meines Bildes auszukleiden.

Bevor ich den Rand zu meinem zweiten div hinzufügte, ordnete es sich perfekt, aber jetzt, da ich es hinzugefügt habe, gibt es eine Lücke zwischen der Kante des div und dem Bild.

.headDiv { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
#heading { 
 
    font-family: fantasy; 
 
    font-size: 36; 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 35%; 
 
} 
 
#navBarDiv { 
 
    height: 30px; 
 
    width: 100%; 
 
    background-color: limegreen; 
 
    margin-top: -4px; 
 
    border: 10px ridge gray; 
 
}

<div class="headDiv"> 
 
    <img id="imgBackgroud" src="http://vignette1.wikia.nocookie.net/unturned-bunker/images/4/4c/PEILEVEL.png/revision/latest?cb=82112" alt="background behing heading" height="200px" width="100%" /> 
 
    <h1 id="heading">Etowah Unturned Server</h1> 
 
</div> 
 
<div id="navBarDiv"> 
 
</div>

Answer 1

box-sizing: border-box zu Ihrem grenzte div hinzufügen. Dies schließt alle Grenzen und Abstände in den width und height Berechnungen ein.

#navBarDiv { 
    height: 30px; 
    width: 100%; 
    background-color: limegreen; 
    margin-top: -4px; 
    border: 10px ridge gray; 
    box-sizing: border-box; /* NEW */ 
} 

Nun ist der Standard box-sizing: content-box außer Kraft gesetzt, und Ihre Grenzen erweitern nicht den div.

https://css-tricks.com/box-sizing/

Answer 2

Wenn Sie die Breite CSS-Regel für #navBarDiv entfernen werden Sie die gewünschten Ergebnisse erzielen. Standardmäßig wird ein div-Element auf Blockebene angezeigt. A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Sie haben diese Regel überschrieben, indem Sie die Breite von #navBarDiv auf 100% festgelegt haben. Wenn Sie an der linken und rechten Seite von #navBarDiv einen Rahmen mit 10px hinzugefügt haben, wurde das Element div auf der rechten Seite der Seite 20 Pixel länger angezeigt als gewünscht.