Question

This is my code:

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>

I want to ask why the width and height are different from normal(paragraph and division) even if the width and height i set is the same?

Answer 1

Many browsers put internal padding on ul tags by default.

You would need to override this:

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