Empty space on top of page when creating a UL on the sidebar side

Question

On my HTML page I created a sidebar and beside a <div> that will guard a <ul>.

Before adding this <ul>, the page was the way I wanted it, with no space on top of the sidebar and the side content. But by adding it to <div>, there was an empty space on top of the page as if there was a margin there, and apparently there is no.

Below is my code:

#sidebar {
    background-color: rgb(11, 22, 34);
    border: 2px solid #000;
    height: 100vh;
    margin: 0;
    overflow: auto;
    padding: 0px;
    position: fixed;
    text-align: center;
    width: 240px;
}

#user_image {
    background-color: #000;
    border: 2px solid #000;
    cursor: pointer;
    height: 200px;
    margin-top: 20px;
    width: 200px;
}

#list {
    height: 100vh;
    margin-left: 240px;
    width: 800px;
}

body {
    background-color: rgb(11, 22, 34);
    margin: 0;
}

<div id="sidebar">
    <img id="user_image" onclick="chooseUserImage();"/>
    <input id="file_input" type="file" hidden="false"/>
</div>
<div id="list">
    <ul></ul>
</div>

What is going on? How can I remove this empty space that was on top of the page?

Answer 1

The problem is that in most user agent stylesheets, the element ul has a standard style that includes properties that define a margin standard. See, the default style in Chrome is this:

ul {                                      /* user agent stylesheet */
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

Thus, still taking into account that this element is a block shown, the margin creates this additional space.

To remove, simply superimpose this margin standard, setting it to zero:

ul {
  margin: 0;
}