How Can I Use Margin-top For Element?

Here is my code: As you see, there isn't any white space in the top of those rows. In other word, margin-top: 3px; doesn't work. Why? And how can I fix it? Current output: Expec

Solution 1:

The margin is the space outside of the border and padding is the space in between the content and the border. Refer to the CSS box model for more details. You can wrap div around your list item content and assign the margin and padding to it but keep the borders on the list item.

.content {
  padding: 5px4px6px7px;
  margin-top: 3px;
  margin-bottom: 3px;
  display: block;
}
li + li {
  border-top: 1px solid #eff0f1;
}
li {
  list-style: none;
}
.content:hover {
  background-color: #f7f8f8;
}

<ul><li><divclass="content">something</div></li><li><divclass="content">something else</div></li><li><divclass="content">something else again</div></li></ul>