input увеличивает высоту td, если у td фиксированная высота

Question

В общем не совсем понимаю, если у td высота фиксированная 40px, padding сверху и снизу занимает 10px, сам input высотой 18px (с помощью calc я даже вычел 2px) в итоге получаем свободные 2px, но почему высота ячейки все равно 42px? Помогите мне понять почему так? Дело возможно в padding, но как?
С помощью JS получаю паддинги и высоту вывожу их в блок log. Посмотрите пожалуйста. Я конечно решил данную проблему версткой input увеличивает td блок, как можно это исправить? , но мне очень интересно как это так высота лишняя появляется? И еще момент у других ячеек почему то высота 39px.

window.onload = () => {
  const log = document.querySelector('.log');
  const td1 = document.querySelector('#td1');
  const td2 = document.querySelector('#td2');
  const style1 = getComputedStyle(td1);
  const input = document.querySelector('#input');
log.innerHTML = `Высота TD: ${td1.clientHeight}px <br>Паддинг: ${style1.padding} <br>Высота Input: ${input.clientHeight}px<br>Высота другого TD: ${td2.clientHeight}px`;
}

table {
  width: 900px; 
  margin: 0 auto;
  border-collapse: collapse;
  table-layout: fixed;
}
table td {
  padding: 10px 0;
  height: 40px;
  box-sizing: border-box;
  border-right: 1px solid #e8e9eb;
  text-align: center;
}
table thead tr {
  font-weight: bold; border-top: 1px solid #e8e9eb;
}
table tr {
  border: 1px solid #e8e9eb;
}
table tbody tr:hover {
  background: #e8f6ff;
}

#input {
  width: 100%;
  box-sizing: border-box;
  height: calc(100% - 2px);
}
.log {
  min-width: 100px;
  margin: auto;
  margin-top: 20px;
}

<table>
  <thead>
    <tr>
      <td>Наименование</td>
      <td>Описание</td>
      <td>Цена</td>
    </tr>
  </thead>
  <tbody>
      <td id="td1">
       <input type="text" id="input">
      </td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td id="td2">Имя #2</td>
      <td>Характеристики</td>
      <td>Стоимость</td>
    </tr>
    <tr>
      <td>Имя #3</td>
      <td>Характеристики</td>
      <td>Стоимость</td>
    </tr>
  </tbody>
</table>

<div class="log"></div>

Answer 1

Высота input пропорциональна font-size:

document.querySelectorAll("input").forEach(input => {
  console.log( input.offsetHeight );
});
// 27, 38, 62

input {
  padding: 0;
}

<input style="font-size: 20px;" value="0">
<input style="font-size: 30px;" value="0">
<input style="font-size: 50px;" value="0">

Есть относительная величина em, 1em равен текущему font-size. Что, если выставить высоту 1em?

document.querySelectorAll("input").forEach(input => {
  console.log( input.offsetHeight );
});
// 24, 34, 54

input {
  padding: 0;
  height: 1em;
}

<input style="font-size: 20px;" value="0">
<input style="font-size: 30px;" value="0">
<input style="font-size: 50px;" value="0">

4 лишних пикселя. А если убрать рамки?

document.querySelectorAll("input").forEach(input => {
  console.log( input.offsetHeight );
});
// 20, 30, 50

input {
  padding: 0;
  height: 1em;
  border: none;
}

<input style="font-size: 20px;" value="0">
<input style="font-size: 30px;" value="0">
<input style="font-size: 50px;" value="0">

Нужен input высотой 20px — строго укажите height: 18px; border: 1px solid #999; и размер шрифта.

Answer 2

Во-первых, не пытайтесь нарушать нативное поведение таблицы, используя box-sizing: border-box;, где нужно и не нужно.

Во-вторых, как можно указывать 100% высоты и тут же давить внутренними отступами? Или это выравнивание такое? Тогда используйте vertical-align: middle;, а лишние отступы - долой.

В-третьих, не забываем про border и то, что он с двух сторон. Так как рамка есть у ячеек таблицы, то рекомендуется для <input> задать border: none;.

window.onload = () => {
  const log = document.querySelector('.log');
  const td1 = document.querySelector('#td1');
  const style1 = getComputedStyle(td1);
  const input = document.querySelector('#input');
  log.innerHTML = `TD1: ${td1.clientHeight}px <br>PD: ${style1.padding} <br>INPUT: ${input.clientHeight}px`;
}

table {
  width: 900px;
  margin: 0 auto;
  border-collapse: collapse;
  table-layout: fixed;
}

table td {
  padding: 0;
  height: 40px;
  /*box-sizing: border-box;*/
  border-right: 1px solid #e8e9eb;
  text-align: center;
  vertical-align: middle;
}

table thead tr {
  font-weight: bold;
  border-top: 1px solid #e8e9eb;
}

table tr {
  border: 1px solid #e8e9eb;
}

table tbody tr:hover {
  background: #e8f6ff;
}

#input {
  border: none;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.log {
  min-width: 100px;
  margin: auto;
  margin-top: 20px;
}

<table>
  <thead>
    <tr>
      <td>Наименование</td>
      <td>Описание</td>
      <td>Цена</td>
    </tr>
  </thead>
  <tbody>
    <td id="td1">
      <input type="text" id="input">
    </td>
    <td>2</td>
    <td>3</td>
    </tr>
    <tr>
      <td id="td2">Имя #2</td>
      <td>Характеристики</td>
      <td>Стоимость</td>
    </tr>
    <tr>
      <td>Имя #3</td>
      <td>Характеристики</td>
      <td>Стоимость</td>
    </tr>
  </tbody>
</table>

<div class="log"></div>

И ещё нюансы...

По умолчанию размер шрифта в <input> - 13.3333px. Даже представить не могу, как эти .3333 распределяются.

... у других ячеек почему то высота 39px.

Это потому, что:

table tr {
  border: 1px solid #e8e9eb;
}

И напоследок - <table> довольно специфичная вещь и гибкость её сильно ограничена, поэтому используйте по назначению и возможно реже. Также рекомендую отказаться от border, выставив им значение none, и заменив на box-shadow: inset 0 0 ...;

БЛОГ НА HUSL

input увеличивает высоту td, если у td фиксированная высота

Ответы (2 шт):