如何将我的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放到我的照片边缘？

回答

相关问题