How To Properly Align The Span And Input Elements?

I want to align a element and the text element. The height of and should be the same, the top and bottom border should be on s

Solution 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;
}

<divclass="cnt"><label><spanclass="one">Test in Span</span><spanclass="two">Span in test</span></label><inputclass="in"value="mmmnnnxx"type="text" /></div>

Simply offset the <input> by adding

input {
    position: relative;
    top: -1px;
}

More info on relative positioning in CSS.

Solution 2:

Just add vertical-align to input.

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

Solution 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.

Solution 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;
}

<divclass="cnt"><label><spanclass="one">Test in Span</span><spanclass="two">Span in test</span></label><inputclass="in"value="mmmnnnxx"type="text" /></div>

Solution 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;
}

<divclass="cnt"><label><spanclass="one">Test in Span</span><spanclass="two">Span in test</span></label><inputclass="in"value="mmmnnnxx"type="text" /></div>