◆ li の中の button で変な隙間ができる
◆ li の display を list-item にしない

こんな HTML を表示すると

<style>
.block{
display: block;
margin: 0;
padding: 10px;
border: 0;
background: #eee;
}
</style>

<div style="background: #dc4b4b;">
<button class="block">div - button</button>
</div>
<ul>
<li style="background: #5d5db5;">
<button class="block">li - button</button>
</li>
</ul>
<ul>
<li style="background: #47a047;">
<input class="block" type="button" value="li - input(button)">
</li>
</ul>
<ul>
<li style="background: #ff6b6b;">
<span class="block">li - span</span>
</li>
</ul>

list-display01

と li の中のボタン要素だけ上に隙間ができてしまいます
input でも button でも一緒


原因がわからず苦戦してたのですが li の display がデフォルトの list-item になっていると起きるようです

なので li の display を block などにすれば隙間はできません
また list-style:none を指定してもおっけいです

<ul>
<li style="background: darkorange;display: block;">
<button class="block">li(block) - button</button>
</li>
</ul>
<ul>
<li style="background: #a059a0;list-style:none;">
<button class="block">li(list-style:none) - button</button>
</li>
</ul>

list-display02



サンプル