چگونه می توانم بر تگ li ویژگی margin-top را اعمال کنم؟

کد من:

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

و

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

همانطور که میبینید margin-top: 3px; اعمال نمیشه. چطور می تونم درستش کنم؟

خروجی فعلی:

خروجی مد نظر:

سلام دوست عزیز؛

ببینید این کاری که شما می‌خواید بکنید چون به صورت همزمان دارید از border ، padding و margin برای یک تگ استفاده می‌کنید امکان پذیر نیست. البته هیچ وقت مشکلی نداره ولی خب شما دارید به همه‌ي لیست یعنی تگ‌ها li این خاصیت‌ها رو میدید که چون border در بین این تگ‌ها وجود داره به شکلی که شما می‌خواید در نمیاد.

من داخل هر li یک div هم اضافه کردم تا بتونم راحت‌تر استایل دهی کنم و استایلی که شما می‌خواید رو در بیارم. به شکل زیر:

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

و

li{
    list-style: none;
    border-bottom: 1px solid #000;
}
li div{
  padding: 5px 4px 6px 7px;
  background-color: #f7f8f8;
  margin: 3px 0;
}
li:last-child{
  border-bottom:0 ;
}
li:hover div{
    background-color: #ddd;
}

نتیجه بصورت تصویر زیر است:

نمونه آنلاین: jsfiddle