CSS已设页面与div高度，Chrome打印预览仍显示两页而非一页

我将单个div元素的高度硬编码为29.7cm，同时设置页面高度为29.7cm，但在Chrome浏览器的打印预览中，页面显示为两页而非一页。

HTML代码 #

<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div></div>
</body>
</html>

CSS代码 #

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

div {
    display: inline-block;
    border: 0.2cm solid red;
    height: 29.7cm;
    width: calc(0.5 * 21.0cm);
}

@page {
    size: 21.0cm 29.7cm;
    margin: 0cm;
}

出现这个问题的核心原因有两个：

• inline-block的默认垂直对齐行为：inline-block元素默认的vertical-align值是baseline，即使元素为空，浏览器也会为其预留一行文本基线的微小空间（由默认行高决定），这会让div实际占据的高度略大于你设置的29.7cm，超出页面高度限制后触发分页。
• body默认内边距未清除：Chrome中body元素默认有8px的内边距，你的全局样式只清除了margin，没有清除padding，这会让div的位置向下偏移，进一步加剧高度溢出的问题。

你可以通过以下任意一种方式解决：

1. 将div的display改为block，彻底消除inline-block带来的基线空间问题：

div {
    display: block; /* 替换inline-block */
    border: 0.2cm solid red;
    height: 29.7cm;
    width: calc(0.5 * 21.0cm);
}

2. 为div设置vertical-align: top，覆盖默认的基线对齐：

div {
    display: inline-block;
    vertical-align: top; /* 添加这一行 */
    border: 0.2cm solid red;
    height: 29.7cm;
    width: calc(0.5 * 21.0cm);
}

3. 同时清除body的默认内边距，在全局样式中补充：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0; /* 添加清除padding */
}

内容的提问来源于stack exchange，提问作者user32882