全局使用 box-sizing: border-box;会出现bug吗。

问题是:没有定位和浮动的情况下,子元素和父元素之间出现空白区域。






1.html结构 和效果截图:
图片说明





父元素的样式:
图片说明


第一行的样式代码:

图片说明





第二行样式代码:

图片说明




其中p是没有写样式的,只有继承通配符的样式margin:0;padding:0;box-sizing: border-box;

问题:见截图

图片说明

会莫名其妙的出现一个空白区域(宽度为:8px,我通过定位调试得知。)

我的解决方法

我把 box-sizing: border-box;去掉后发现能正显示了,但是我之前的布局都会出错了。这并不是我想要的结果。究竟问题出在哪里?求告知。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

全局会影响所有的,不是全局应用样式,建议新加子样式,在子样式中加,既可以继承父样式(即这里的全局),也可以有个性设置。

老铁,你的是怎么解决的。我也遇到了这种情况,在局部样式中添加concent—box也不管用,只有去掉全局border才可以,不过我多的空白部分好像和你不太一样