How to properly align the span and input elements?

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?

Height's are tough with inputs because browsers all like to do their own thing. I think no matter your solution, there will be very subtle differences between browsers. You might be better off using a disabled input with styling so you can guarantee they will align as they will be the same element type. — Leeish, Aug 04 '16 at 16:49
possible duplicate: [**Why is my textarea higher up than it's neighbor?**](http://stackoverflow.com/q/32414736/3597276) — Michael Benjamin, Aug 04 '16 at 16:57

TrampolineTales · Accepted Answer · 2016-08-04T17:05:11.187

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.

score 2 · Answer 2 · answered Aug 04 '16 at 16:51

2

Just add vertical-align to input.

Check: https://jsfiddle.net/ajo4boom/1/

answered Aug 04 '16 at 16:51

Rohit

1,794
1
8
16

score 2 · Answer 3 · answered Aug 04 '16 at 16:52

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.

Laurence Lord · Answer 4 · 2017-08-29T17:44:07.680

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>

andreas · Answer 5 · 2016-08-04T17:03:59.993

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>

How to properly align the span and input elements?

5 Answers5

Linked