Question

我正在尝试将body元素的高度设置为视口的100％。

使用它起作用：

CSS：

html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

但后来我在body中添加了一个无序列表，现在html元素顶部似乎有大约1em个额外填充。

HTML： （没有所有不相关的元素和属性）

<body>
    <div>
        <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
        </ul>
    </div>
</body>

这也适用于有序列表。

JSFiddle

PS：我只在Firefox和Chrome中测试了这个。

Answer 1

此保证金由<ul>添加。将以下内容添加到样式表中：

ul { margin-top: 0px; }

Updated Fiddle

我不确定为什么 <ul>有一个默认的上边距，我也不知道哪些浏览器会这样做，或者它是否符合规格，但我认为这样说是安全的如果您不想要一个上边距，最安全的选择是始终明确设置它，而不用担心默认情况下浏览器会做什么。

为什么添加一个列表元素来添加额外的填充？ CSS

CSS：

1 个答案: