如何摆脱细节元素内部元素下方的空间[重复]答案

【问题标题】：How to get rid of space below element inside details element [duplicate]如何摆脱细节元素内部元素下方的空间[重复]
【发布时间】：2019-10-12 19:30:20
【问题描述】：

我有 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）。

【问题讨论】：

你是指[08:33:43]: Connection下面的空格？
@ÖmürcanCengiz 红色边框和细节边框之间的空间。用截图更新了问题。
尝试删除选择器log中的min-height: 50px;。
@caisil 这是为了限制 textarea 的大小，它不起作用。

标签： html css

【解决方案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>

【讨论】：

太好了，谢谢，我正要写解决方法，在摘要和文本区域设置边框。