input type is an unaligned question for text and button and a small space between

Today, the lab learns to ask me "how this input, search button is not all right ah"

It looks like this:

Hey, how can I see the code is all right? The same height, the same line-height, each has a width (review, input belongs to the Inline-block element)

Daoteng for a long time feeling is very strange now think back how did not hurry Baidu under the pit of the predecessors were also many AH

The first thing to note is that this phenomenon will only appear in Chrome did not expect this will be Chrome's pot in Firefox and IE are more normal

As for the reason ... Some people say that, but I have their border, padding are set to 0, or is not aligned, so do not agree, want to know greatly inform

And the solution, that's a lot more.

1. Package + float: such as Span+float:left

Main code:

. text{
    padding:0;
    border:0;
    width:400px;
    height:30px;
}
. but{
    border:0;
    padding:0;
    width:30px;
    height:30px;
    Background:url (so.svg);
}
span{
    float:left;
}

    <form>
        <span><input class= "text" type= "text" name= "InputExt" placeholder= "Please enter search contents" ></ span>
        <span><input class= "but" type= "button" name= "but" ></span>
    </form>

    <form>
        <input class= "text" type= "text" name= "InputExt" placeholder= "Please enter search contents" >
        < Input class= "but" type= "button" name= "but" >
    </form>

2.vertical-align

There are three ways to set your options: Add Vertical-align:bottom/middle to button, or add Vertical-align:top to text

3. Use a Space value

This is my own daoteng found, when the button does not set the width of the time, the two will be aligned, of course, to give the button added value to reflect, this is really very strange, so the value of the content into a space is also possible, of course, this is only a small discovery, It must not be so in production.

Finally, by the way, the space between the button and the text

The reason is that they are inline-block, inevitably with an inline element attribute is the interval between content

Two commonly used methods; 1. Set the font-size:0px;2 in the parent element. Remove the space between the two input in the code, a more elegant way to display, is to use the annotation (this is from the Zhang Xin Asahi big God that looks)