How to properly align the span and input elements? - html

Question

I want to align a <span> element and the <input> text element. The height of <input> and <span> should be the same, the top and bottom border should be on same line and the text inside the <input> and <span> elements should be on the same line.
.cnt {
margin: 5px;
}
.one {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.two {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.in {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
input {
padding: 0;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>
https://jsfiddle.net/ajo4boom/
How to do what I want?

Answer 1

I've found success by using an external stylesheet such as normalize.css. They're very useful for making sure your tags stay aligned across all browsers.
Another solution would be to do the following:
.cnt {
margin: 5px;
}
.one {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.two {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.in {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
input {
position: relative;
top: -1px;
padding: 0;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>
Simply offset the <input> by adding
input {
position: relative;
top: -1px;
}
More info on relative positioning in CSS.

Answer 2

Just add vertical-align to input.
Check: https://jsfiddle.net/ajo4boom/1/

Answer 3

You can use your browser toolkit or the mozilla extention : firebug, to help yourself finding the origin of the problem. You would see that only input was really 17px height. Spans were, in the browser reality, 19px height.
So defining your span height to 19px would also roughtly work.

Answer 4

Many of the native properties of inputs will be different from those of spans. First up, you might also like to normalise border, font-family, font-size, line-height and padding.
To take advantage of the height property, define display: inline-block on both elements. Also, box-sizing: content-box will ensure they have the same box-sizing, meaning the way padding and borders will affect their height and width.
.one, .two, .in {
box-sizing: content-box;
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
display: inline-block;
font-family: sans-serif;
font-size: 16px;
line-height: 18px;
padding: 2px;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>

Answer 5

Here's a possible solution using display: inline-block;, line-height and vertical-align, but it's like #Leeish commented:
Height's are tough with inputs because browsers all like to do their
own thing
.cnt {
margin: 5px;
}
label {
display: inline-block;
}
input {
padding: 0;
}
.one, .two, .in {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
display: inline-block;
line-height: 17px;
vertical-align: top;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>