如何摆脱细节元素内部元素下方的空间

Question

我有details元素，如果我在其中放一些东西并尝试使其高度为100％，则该元素下面有空间，并用textarea和div进行了测试。

我指的是.log元素的红色边框和details元素的黑色边框之间的空间。

details {
    width: calc(100vw - 20px);
    box-sizing: border-box;
    border: 1px solid black;
    padding: 0;
}
.log {
    width: 100% !important;
    height: 100%;
    overflow-y: scroll;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid red;
    outline: none;
    min-height: 50px;
    display: inline-block;
}

<details>
    <summary>Connection Log</summary>
    <div class="log" readonly>[08:33:43]: Connection</div>
</details>

<details>
    <summary>Connection Log</summary>
    <textarea class="log" readonly>[08:33:43]: Connection</textarea>
</details>

如何摆脱这个空间？我想要这个，是因为我想在角落调整大小（我将使用textarea）。

Answer 1

将vertical-align: top添加到您的日志类。内联元素中保留descender个字符的空间，例如y，j，g：

details {
  width: calc(100vw - 20px);
  box-sizing: border-box;
  border: 1px solid black;
  padding: 0;
}

.log {
  width: 100% !important;
  height: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid red;
  outline: none;
  min-height: 50px;
  display: inline-block;
  vertical-align: top;
}

<details>
  <summary>Connection Log</summary>
  <div class="log" readonly>[08:33:43]: Connection</div>
</details>

<details>
  <summary>Connection Log</summary>
  <textarea class="log" readonly>[08:33:43]: Connection</textarea>
</details>