How to get rid of space below element inside details element

Question

I have details element and if I put something inside and try to make it height 100% there is space below that element, tested with textarea and div.

I'm referring the space between red border of .log element and black border of details element.

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>

How to get rid of that space? I want this because I want resize in the corner (I will use textarea).

@ÖmürcanCengiz The space between red border and details border. Updated the question with screenshot. — jcubic, Oct 11 '19 at 16:56
@caisil this is to limit resize of textarea, it make no effect. — jcubic, Oct 11 '19 at 16:59

score 2 · Accepted Answer · answered Oct 11 '19 at 17:04

Add vertical-align: top to your log class. Space is reserved in inline elements for descender characters, e.g. 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>

Great, thanks, I was just about to write workaround with setting border on summary and textarea. — jcubic, Oct 11 '19 at 17:06

How to get rid of space below element inside details element

1 Answers1