How Can I Set Margin Top/bottom To A Li?

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:

Your problem is due to collapsing margins - from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing:

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

To get around this, I would wrap the content of the li in a span or div and put your original li padding on that, and then put the 3px margin as padding on your li instead:

li {
  list-style: none;
  padding: 3px0; /* this is in place of your margin */
}
li + li {
  border-top: 1px solid #eff0f1;
}
li > span {
  display: block;
  padding: 5px4px6px7px; /* this is you original li padding */
}
li:hover > span {
  background-color: #f7f8f8;
}

<ul><li><span>something</span></li><li><span>something else</span></li><li><span>something else again</span></li></ul>

UPDATE

If you cannot change your html then you will need something like this:

li {
  list-style: none;
  padding: 5px4px6px7px;
  margin-bottom:7px; /* 3px margin plus 1px for the border */position:relative;
}
li + li:before {        /* this is a pseudo element to create the border */content:'';
  display:block; 
  height:1px;
  background: #eff0f1;
  position:absolute;
  top:-4px;
  left:0;
  right:0;
}
li:hover {
  background-color: #f7f8f8;
}

<ul><li>something</li><li>something else</li><li>something else again</li></ul>

Solution 2:

You can do it using relatively-positioned pseudo-elements:

li {
  padding: 5px4px6px7px;
  list-style: none;
}
li + li {
  margin-top: 6px; /* total distance between elements */
}
li + li:before {
  content: '';
  display: block;
  position: relative;
  top: -8px; /* padding-top (5px) + margin-top (3px) */border-top: 1px solid #eff0f1;
}
li:hover {
  background-color: #f7f8f8;
}

<ul><li>something</li><li>something else</li><li>something else again</li></ul>

Solution 3:

UPDATED: JSFIDDLE you can try to ad another elements inside li .. Your margin it's working but you can't see because when you margin an element even the border is margin-en with the element. To prove that you can raise the margin-top:20px; and you can see that the margin is working. The padding is used to create space from inside the element.

+----------------------------+
|                            |
|          margin            |
|                            |
|   *******border**********  |
|   *                     *  |
|   *      padding        *  |
|   *                     *  |
|   *   ---------------   *  |
|   *   ---------------   *  |
|   *   ---ELEMENT-----   *  |
|   *   ---------------   *  |
|   *   ---------------   *  |
|   *                     *  |
|   ***********************  |
|                            |
|                            |
+----------------------------+

Solution 4:

Answer

The result is very easy to achieve. Simply add

background-clip: content-box;

to your CSS.

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

<ul><li>padding</li><li>padding else</li><li>padding else again</li></ul>

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;
}

<divclass="normal">
  Normal
</div><divclass="content-box">
  content box
</div><divclass="padding-box">
  padding box
</div>