chrome浏览器下：body元素默认有外边距，为8px。
默认为8px
当我在body上设置margin为0时，布局显示margin为0，但是页面上依然有空隙，且大于外边距。
布局显示无外边距
有空隙
比body的104多16+16
推测为font-size的尺寸与margin的尺寸。我尝试设置*{margin:0;}发现空隙消失且body与html的高度相等都为104px。但是margin总和为16px，而总空隙为32px。
空隙消失
我又去设置html上的font-size：1px;
html为80px
body为64px
html比body多正好16px。也就是body的margin。
而此时body上的margin变得有效果了。于是我去设置body上的margin，删掉了*{margin:0;}
body为64
html则为66
又比body多出2px。而*{margin:0;}则可以让html与body都为64px。
查阅资料知道了可能是其他元素的margin导致的。为了避免padding也出现这种情况。
推荐*{margin:0;padding:0;}效果较好。
网友评论