为什么<input />中的文本内容呈现方式与<div>或<span>标签中的文本内容不同？</span> </div>

Question

情况
我有两个页面具有相同的内容和样式。它们之间的区别在于，一个列出了<div>元素的项目，另一个列出了<input>个元素（分别用于显示和编辑资源）。

我希望两个页面都具有相同的布局。我已在标准<div>页面上实现了我想要的布局，并希望在包含<input>元素的页面上复制它。两个页面都应用了相同的CSS规则以及Eric Mayer的重置。

问题
文本在<div>元素中的呈现方式与<input>元素中的文本呈现方式不同，导致<input>过高。

已经尝试过什么
我已尝试设置input的高度，使其与div相同，但这会导致文本在底部被剪裁。我找不到一种方法来删除输入顶部的空白区域。

我也为每个元素做了计算样式的差异，它们几乎完全相同（除了几个对这个问题没有影响的样式）。

问题
有没有办法让第一张图片中的input与第二张图片中div的高度相匹配？
另外，在哪里我可以了解更多关于浏览器如何/为何具有这种行为以及控制它的原因？我已经通过W3C's CSS Fonts Module Level 3阅读了不满意的结果。

查看当前状态（input，div）：

.recipe .header {
  margin-bottom: 50px;
  text-align: left;
  font-weight: 600;
  color: #f0424b;
}

.form-recipe input {
  font-family: "futura-pt";
}

.header {
  margin-bottom: 40px;
  font-size: 3em;
  text-align: center;
}

// Reset

input {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; 
}

// User agent stylesheet

input {
  padding: 1px 0px;  
  -webkit-appearance: textfield;
  padding: 1px;
  background-color: white;
  border: 2px inset;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  cursor: auto;
}

<div class="delicious">
	<form name="recipe.edit" class="form form-recipe recipe">
		<div class="form-group">
			<div class="form-row">
				<input type="text" class="header" value="Banana Bread"/>
			</div>
		</div>
	</form>
</div>

.recipe .header {
  margin-bottom: 50px;
  text-align: left;
  font-weight: 600;
  color: #f0424b;
}

.header {
  margin-bottom: 40px;
  font-size: 3em;
  text-align: center;
}

// Reset

div {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline; 
}

// User agent stylesheet

div {
  display: block; 
}

<div class="delicious">
	<div class="recipe">
		<div class="header">
			Banana Bread
		</div>
	</div>
</div>

Answer 1

this怎么样？如果您希望它们完全相同，那就有效。 （它们之间的空格是因为其他包装器）

HTML

<div class="delicious">
    <form name="recipe.edit" class="form form-recipe recipe">
        <div class="form-group">
            <div class="form-row">
                <input type="text" class="header" value="Banana Bread"/>
            </div>
        </div>
    </form>
</div>

<!------------------------------------------------------------>

<div class="delicious">
    <div class="recipe">
        <div class="header">
            Banana Bread
        </div>
    </div>
</div>

CSS

.recipe .header {
  margin-bottom: 50px;
  text-align: left;
  font-weight: 600;
  color: #f0424b;
}

.form-recipe input {
  font-family: "futura-pt";
}

.header {
  margin-bottom: 40px;
  font-size: 3em;
  text-align: center;
  width:100%;
  border:none;
  padding:0;
  outline:0;
}

虽然我个人不会推荐这个，因为我相信用户需要意识到它现在能够编辑内容，无论如何，可能设置outline-color:#f0424b并将元素集中在编辑上？ outline不会影响元素的宽度/高度，但它确实提供了一些您可以对焦并能够进行编辑的线索。

希望它有所帮助！