如何將我的div放到我的照片邊緣？

我無法將我的div邊緣與邊框貼到我的圖片邊緣。如何將我的div放到我的照片邊緣？

在我將邊框添加到第二個div之前，它完美地排列起來，但現在我添加了它，div邊緣與圖片之間存在間隙。

.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>

來源

2016-08-01 Jake_the_camper

添加box-sizing: border-box你鑲上股利。這將包括width和height計算中的任何邊界和填充。

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

現在默認box-sizing: content-box被覆蓋，你的邊界不擴大股利。

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

來源

2016-08-01 00:45:22

如果刪除寬度CSS規則#navBarDiv你會得到你想要的結果。默認情況下，div元素將以塊級別顯示。 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).您通過將#navBarDiv的寬度設置爲100％來覆蓋此規則。因此，當您在#navBarDiv的左右兩側添加10px的邊框時，div元素的顯示時間比頁面右側的長20個像素。

來源

2016-08-01 01:20:47

如何將我的div放到我的照片邊緣？

回答

相關問題