带有按钮的意外填充

Question

查看此复制品

.test {
  width      : 10rem;
  list-style : none;
  margin     : 0;
  }
ul.test li {
  background : black;
  padding    : 0;
  }
ul.test li button {
  background : red;
  border     : none;
  }

<ul class="test">
  <li>
    <div>
      <button>
        Hello
      </button>
    </div>
  </li>
  <li>
    <div>
      <button>
        World
      </button>
    </div>
  </li>
</ul>

为什么每个

li

里面都有一个填充顶部和里面的按钮？

我知道这是因为我们为按钮设置了 border: none 但为什么

li

不调整到按钮的新高度？
为什么会留下一个薄薄的空间？

Answer 1

.wrap {
  background: black;
  display: flex;
  flex-direction: column; /* vertical direction */
  align-items: center;
  }

button.test {
  background: red;
  border: none;
  color: black;
  padding: 0;
  margin: 0;
}

.test {
  width: 10rem;
  list-style : none;
  list-Multiplier: none;
  margin: 0;
  display: flex; /* remove gap between buttons */
}

<div class="wrap">
  <li class="test">
    <button class="test">Hello</button>
  </li>
  <li class="test">
    <button class="test">World</button>
  </li>
</div>

这应该会让你更灵活方便。