How can I set margin top/bottom to a li?

Answer 1

Answer

The result is very easy to achieve. Simply add

    background-clip: content-box;

to your CSS.

li {
  padding: 5px 4px 6px 7px;
  list-style: none;
  
    background-clip: content-box;
}
li + li {
  border-top: 1px solid #eff0f1;
}
li:hover {
  background-color: #f7f8f8;
}

  
padding
  
padding else
  
padding else again

full exmample of background-clip:

div {
  background-color:#faa;
  border:3px dotted black;
  margin:20px;
  padding:20px;
}

.normal {
    background-clip: border-box;
}

.padding-box {
    background-clip: padding-box;
}

.content-box {
  /* note this does not color the background of the border */
    background-clip: content-box;
}

  Normal



  content box



  padding box