Why is the same text content rendered differently in <input> than in <div> or <span> tags? - html

Question

The Situation
I have two pages with identical content and styling. The difference between them is that one lists items with <div> elements and the other with <input> elements (for showing and editing a resource, respectively).
I'd like both pages to have the same layout. I've achieved the layout I want on the standard <div> page and would like to duplicate it on the page with <input> elements. Both pages have the same CSS rules applied to them as well as Eric Mayer's Reset.
The Problem
Text is rendered differently in a <div> element than it is in an <input> element and results in an <input> that is too high.
What's Been Tried
I've tried setting the height of the input so that it is the same as the div, though that causes the text to become clipped at the bottom. I couldn't find a way to remove the white space at the top of the input.
I also did a diff of the computed styles for each element and they are almost identical (aside from a few styles that have no affect on the issue here).
The Question
Is there a way to make the input in the first picture match the height of the div in the second?
Additionally, is there a place where I can learn more about how/why browsers have this sort of behavior and what controls it? I've already read through W3C's CSS Fonts Module Level 3 with unsatisfactory results.
See current state (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

How about this? That works if you want them exactly identical. (The spaces between them are because of the other wrappers)
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;
}
Though I personally wouldn't recommend this, because I believe the user needs to realize that it's now able to edit the contents, anyway, maybe set outline-color:#f0424b and focus the element on edit? outline does not affect the element's width/height but it does give some clue that you are in focus and able to edit.
Hope it helps!