html - 为什么div和ul的宽高和正常的不一样

Question

这是我的代码:

CSS

div {
    height: 200px;
    width: 600px;
    border: 1px solid black;
}
ul {
    height: 200px;
    width: 600px;
    border: 1px solid black;
}
p {
    height: 200px;
    width: 600px;
    border: 1px solid black;
}

HTML

<div></div>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<p></p>

我想问一下，为什么我设置的宽度和高度相同，但宽度和高度却与正常(段落和分区)不同？

Answer 1

许多浏览器默认将内部填充放在 ul 标签上。

你需要覆盖它:

CSS

div {
    height: 200px;
    width: 600px;
    border: 1px solid black;
}
ul {
    height: 200px;
    width: 600px;
    border: 1px solid black;
    padding: 0px;
    margin: 0px;
}
p {
    height: 200px;
    width: 600px;
    border: 1px solid black;
    margin: 0px;
}​

Demo