Question

我正在创建HTML片段，稍后我会转换为PNG（我使用IMGKit来执行此操作）。

我当前的HTML标记如下所示：

<html>
<head><title>Test</title></head>
<body>
    <div class='snippet'>
        ...
    </div>
</body>
</html>

现在，即使我设置了以下CSS：

.snippet {
    width:160px;
    height:600px;
}

在检查DOM时，我注意到HTML元素比它包含的DIV要宽得多。我希望HTML和Body标签与该div的大小完全相同，这样当我渲染到PNG时，最终的宽度和高度为160x600。

在CSS中执行此操作的正确方法是什么？我是否需要为HTML和Body元素添加width和height属性？

Answer 1

您无法更改<html>标记的大小。这是不可能的。 html标记维度定义为浏览器视图端口。但是，您可以通过应用css样式来更改其他所有内容：display: inline-block;，如下所示：

body, div {
    display: inline-block;
}