margin-top is not being applied on the first item of unordered list

Question

The output I got

While trying out some CSS properties, I've observed that margin-top wasn't working on item A. Below is the code I've used for testing:

ul {
  background-color : #295580;
  width            : 190px;
  border-radius    : 6px;
}

ul>li {
  background-color : #d9e8f7;
  margin-top       : 20px; /*/ Tried to apply margin-top on each <li> item */
}

<ul>
  <li>item A</li>
  <li>item B</li>
  <li>item C</li>
  <li>item D</li>
  <li>item E</li>
</ul>

Actually I was trying to add margin on top of each <li> child.
So my question is why margin-top is being applied to all items(i.e. From item B to item E) except item A? Is it because of margin collapse or is there another reason behind it?

Answer 1

The margin IS being applied. However, it is not visible since it the ul collapses the margin. You can apply padding-top to the ul element and the margin will not collapse.

ul {
  background-color : #295580;
  width            : 190px;
  border-radius    : 6px;
  padding-top      : 0.1px;
}