Css 当“子宽度”设置为100%时，子div与父div仅在右侧有奇怪的重叠_Css

Css 当“子宽度”设置为100%时，子div与父div仅在右侧有奇怪的重叠

css

Css 当“子宽度”设置为100%时，子div与父div仅在右侧有奇怪的重叠,css,Css,我有一个父div和子divdiv。子div宽度设置为100% 两者都有2px的边界奇怪的是，子div的左边缘出现了，而右边缘似乎被父div覆盖了更改子div上的边距或父div上的填充似乎并没有起到作用将子宽度调整为低于100%的大小似乎可行，但不想这样做，也不知道为什么会发生这种情况小提琴： HTML <body> <div id='parent'> <div class='child'></div> <

我有一个父div和子div

div

。子div宽度设置为100%

两者都有2px的边界

奇怪的是，子div的左边缘出现了，而右边缘似乎被父div覆盖了

更改子div上的边距或父div上的填充似乎并没有起到作用

将子宽度调整为低于100%的大小似乎可行，但不想这样做，也不知道为什么会发生这种情况

小提琴：

HTML

<body>
    <div id='parent'>
        <div class='child'></div>
    </div>
</body>

默认情况下，边框包括在宽度计算中。更改（或仅删除）宽度或长方体大小调整模式：

如果不更改“显示”属性，div将渲染为块元素，因此始终填充其父元素的整个宽度。取决于示例的真实性，但在这种情况下，只需删除子

div

上的宽度即可

答案很好-盒子大小是一个很好的建议

#parent {
    height: 550px;
    width: 400px;
    margin: 0 auto;
    border: 2px solid 
    overflow: scroll;
}
.child {
    width: 100%;
    height: 50px;
    border: 2px solid 
}

.child {
    box-sizing: border-box;
}