Html 缺少像素css固定div包装器

因此，我尝试使用固定的宽度和高度像素使div完全适合包装器。虽然我不明白像素是怎么加起来的

HTML

如果父div的宽度为690px，那么为什么子div不能用计算的宽度、边距和边界加起来为690

（第1部分）180+30+（第2部分）285+30+（第3部分）165=690px

如果你看第三组，就看不到右边的边界。您必须将宽度减小7px才能看到它

这也是垂直发生的，190px的div3高度意味着完全接触div4，但关闭4px

这是浏览器问题吗？我不知道的默认对齐问题？我真想知道为什么会这样

---

如有任何反馈，将不胜感激。：）

您是否已签出框大小调整功能？ 以下是一些可能有用的链接

---

如果您在HTML中添加类似的注释，您可以修复顶部，但对于第2行中的图像，我不知道，我仍在继续尝试

好的，所以我把第一行放在一个div“test”中，让他显示：block和overflow hidden去掉下面的空间，然后我给了div1固定的高度和宽度180px（图像+边框）

#包装器{
高度：455px；
宽度：690px；
背景颜色：灰色；
左边距：自动；
右边距：自动；
边缘顶部：10px；
溢出：隐藏；
}
.测试{
显示：块；
溢出：隐藏；
}
.1分部{
高度：180像素；
宽度：180px；
显示：内联块；
边缘底部：10px；
垂直对齐：顶部；
}
.形象{
最大宽度：172px；
最大高度：172px；
边界半径：2%；
边框：4px纯蓝色；
}
.第2分部{
高度：172px；
宽度：277px；
边框：4px纯蓝色；
显示：内联块；
左边距：30px；
背景颜色：紫色；
}
.第3分部{
宽度：159px；
高度：188px；
显示：内联块；
左边距：30px；
左边框：4倍纯蓝色；
右边框：2倍纯蓝；
边框顶部：2件纯蓝；
垂直对齐：顶部；
背景颜色：紫色；
}
.第4分部{
背景：url（'http://lorempixel.com/690/265/cats“）无重复中心；
背景尺寸：包含；
宽度：690px；
高度：265px；
显示：块；
溢出：隐藏；
}

OP正在计算math.border-box中的边框宽度。如果设置框大小，则修复此问题：border-box；它与显示：内联块有关。看：@Jonathan002我希望你能理解我的蹩脚英语；）非常感谢！起初，当您建议使用注释作为修复方法时，我非常困惑，但后来我了解了html空白。。真棒的男人！：）

    <div class="div1">
        <img src="image.png" alt="image" class="image">
    </div>

    <div class="div2">

    </div>

    <div class="div3">

    </div>

    <div class="div4">

    </div>
</div>

#wrapper {
    height: 455px;
    width: 690px;
    background-color: grey;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    overflow: hidden;
    white-space:nowrap;
}

.div1 {
    display: inline-block;
    margin-bottom: 10px;
    vertical-align:top;
}

 .image {
    max-width: 172px;
    max-height: 172px;
    border-radius: 2%;
    border: 4px solid blue;
}

.div2 {
    height: 172px;
    width: 277px;
    border: 4px solid blue;
    display: inline-block;
    margin-left: 30px;
    background-color: purple;
}

.div3 {
    width: 159px;
    height: 188px;
    display: inline-block;
    margin-left: 30px;
    border-left: 4px solid blue;
    border-right: 2px solid blue;
    border-top: 2px solid blue;
    vertical-align: top;
    background-color: purple;
}

.div4 {
    background: url(image.png) no-repeat center;
    background-size: cover;
    width: 690px;
    height: 265px;
}