Display:inline-block replacing the float problem

After reading the blog of the Great God, http://www.zhangxinxu.com/wordpress/?p=1194 a new understanding of float, trying to replace the content with float with Display:inline-block. The process is as follows:

First, we create several div:

<Divclass= "Container">    <Divclass= "Content">        <Divclass= "logo"></Div>        <Divclass= "Search"></Div>    </Div></Div>    

Then, set the basic style: where the content block sets the property display:inline-block;

. Container{Height:100px;width:100%;Background-color:#f90; }. Content{Margin-left:Auto;Margin-right:Auto;width:80%;Background-color:#a6c0f9; }. Logo{Height:100px;width:80px;Display:Inline-block;Background-color:Pink; }. Search{Height:100px;width:550px;Background-color:Green;Display:Inline-block;vertical-align:Top; }

The performance is like this:

We found that there was a gap between the logo and the search two Div, which we expected because the spaces in the HTML code were also shown. But what is the height of a little bit more (about 1px)?

Try to remove all the blanks: the gap in the middle is not there, but the height is beyond the scope of the container still exists.

Add content to the middle of the two Div, shown as:

Found below the more 1px disappeared!

Remove the content and use font-size:0 to solve the gap problem:

The extra place was cleared.

But the height of the more out of the place still don't know what reason. To remove the display is not the problem, seems to be on the Inline-block, but the display:inline-block of other information, and did not find the answer, other browsers also have this problem. Think of the solution, want to know the person can point twos, and later find the answer must come to update.

We continue to add an input to search:

<Divclass= "Container">    <Divclass= "Content">        <Divclass= "logo"></Div>        <Divclass= "Search">          <inputtype= "text"class= "Search_input" />        </Div>    </Div>  </Div>    

The findings turn out to be this:

Add border to input after a sudden epiphany, originally because of alignment. Add Vertical-align:top to search, and then everything is normal.

PS: Before learning CSS, as long as you know what to use, out of the problem is also patchwork reluctantly solve the end, this is very bad. Recently found to see more professional books to check documents, master the standard of the people can master the world Ah ~ ~

Display:inline-block replacing the float problem