Question

我遇到了一个问题：只有一个孩子的父元素具有高度，即使唯一孩子的所有填充，边距，边框，轮廓，高度和宽度都设置为零，但是当我将display设置为none时，它突然起作用。

为什么会这样？我忘记了什么？如何在不更改父元素高度的情况下达到parrent元素的高度为零的点？

这是我制作的快速摘要。

* { 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>

谢谢。

编辑：我还需要将输入也显示为行内块，是否可以通过显示行内块来做到这一点？

Answer 1

将div line-height设置为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>

Answer 2

将输入设置为display: block

Answer 3

在这里，您面临inline-block元素的行为及其对齐方式。因此，要解决此问题，您需要像Paulie_D或line-height:0建议的那样将font-size:0设置为div，并更改输入的对齐方式，默认情况下将其作为基线。

* { box-sizing: border-box; }

div{
  border: 3px red solid;
  margin: 0;
  padding: 0;
  font-size:0;
  /*Or
  line-height:0;*/
}

input{
  /*display: inline-block; no needed since it's the default value */
  height: 0;
  width: 0;
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
  vertical-align:top; /*Add this*/
}

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

即使独生子的所有填充，边距，高度和宽度都设置为零，即使只有独子的父元素也具有高度

3 个答案: