为什么第一个子元素的margin-top属性会引起父元素出现滚动条？

以下示例代码，如果把margin-top去掉，就能去除滚动条。但为什么margin-top会把父元素撑高？

<!DOCTYPE html>
<html style="height:100%">
	<body style="height:100%;margin:0">
		<div style="margin-top:20px">Test</div>
	</body>
</html>

老糊涂仙

浏览 2817回答 1

可以说很强了

可以在父元素上使用box-sizing:border-box解决