Parent element with only child has height even if the only child had all paddings, margins, height and width set to zero

Question

I encountered a problem: Parent element with only child has height even if the only child had all paddings, margins, borders, outline, height and width set to zero, however when I set display to none it suddenly works.

Why is this happening? What have I forgotten? How can I reach the point when parrent element will have height of zero without altering the height of parent element?

Here is quick snippet I've made.

* { box-sizing: border-box; }

div{
  border: 3px red solid;
  margin: 0;
  padding: 0;
}

input{
  display: inline-block;
  height: 0;
  width: 0;
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
}

<div><input type="text"></div>

Thanks.

Edit: I need input to be displayed as inline-block as well, is there any way to do that with display inline-block?

Answer 1

Set the divs line-height to 0

* {
  box-sizing: border-box;
}

div {
  border: 3px red solid;
  margin: 0;
  padding: 0;
  line-height: 0;
}

input {
  display: inline-block;
  height: 0;
  width: 0;
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
}

<div><input type="text"></div>