html - CSS 垂直对齐问题

Question

我正在尝试获取我的 <div>和我的 <button>垂直占据相同的空间。他们每个人都有一个height:20px样式，但如您所见，我的 <div> 下面有空间我的 <button> 上方的标签和空格标签。 我应该怎么做才能让我的 <div>和 <button>标签占用相同的 20px？

body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
button {
  padding: 0px;
  margin: 0px;
  border: 0px;
}

.box {
  border: 1px solid red;
}

.boxes {
  display: inline-block;
  border: 1px solid black;
  height: 20px;
  width: 20px;
}

#next {
  display: inline-block;
  margin-top: auto;
  margin-bottom: auto;
  height: 20px;
}

<div class="box" id="box0">
  <p class="boxes" id="boxes0">

  </p>
  <button id="next" onclick="switcher()">Guess</button>
</div>

我的 jsfiddle 是 https://jsfiddle.net/pb4759jh68/37bfhxdr/4/

Answer 1

由于您使用的是行内 block 元素，因此您在 .boxes 和 .next 类中将 vertical-align 属性设置为 middle

body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
button {
  padding: 0px;
  margin: 0px;
  border: 0px;
}

.box {
  border: 1px solid red;
}

.boxes {
  display: inline-block;
  border: 1px solid black;
  height: 20px;
  width: 20px;
  vertical-align: middle;
}

#next {
  display: inline-block;
  margin-top: auto;
  margin-bottom: auto;
  height: 20px;
  vertical-align: middle;
}

<div class="box" id="box0">
  <p class="boxes" id="boxes0">

  </p>
  <button id="next" onclick="switcher()">Guess</button>
</div>