Extra white-space above search bar

Question

I am wondering why there is big white space above seach bar without using any margin or padding, when using inline-block;

Fiddle: https://jsfiddle.net/2jf0a7oc/

HTML:

<header>

<div class="logo">
<img
src="https://www.google.co.in/images/nav_logo.png">
</div> <!--END logo -->

<div class="search">
<form action="http://google.com/search">
<input type="text" name="q" placeholder="Search...">
<input type="submit" value="Go" title="Search">
</form>
</div> <!--END search -->

</header>

CSS:

header{ background:white; }
.logo{ display:inline-block; }
.logo img{ display:block; height:67px; width:102px; margin:14px 0; }
.search{ display:inline-block; }
.search input[type="text"]{ border:0; padding:10px; width:300px; float:left; background:grey; }
.search input[type="submit"]{ border:0; width:35px; padding:10px; }

Possible duplicate of [CSS vertical alignment of inline/inline-block elements](http://stackoverflow.com/questions/9670469/css-vertical-alignment-of-inline-inline-block-elements) — Vucko, Mar 03 '16 at 11:56

score 3 · Accepted Answer · answered Mar 03 '16 at 11:55

Because you're styling your .search element with a display of inline-block it ends up being treated in the same way as text. This means that it's affected by the vertical-align property, which by default is set to baseline.

To rectify this, all we need to do is modify the vertical-align property to something different (i.e. top):

.search {
    ...
    vertical-align: top;
}

Modified JSFiddle demo.

score 0 · Answer 2 · answered Mar 03 '16 at 11:58

Use float:left instead of display:inline-block to both logo and search divs.

header{ background:white; margin:14px 0;  }
.logo{ float:left }
.logo img{ display:block; height:67px; width:102px; }
.search{ float:left }
.search input[type="text"]{ border:0; padding:10px; width:300px; float:left; background:grey; }
.search input[type="submit"]{ border:0; width:35px; padding:10px; }

<header>

<div class="logo">
<img
src="https://www.google.co.in/images/nav_logo.png">
</div> <!--END logo -->

<div class="search">
<form action="http://google.com/search">
<input type="text" name="q" placeholder="Search...">
<input type="submit" value="Go" title="Search">
</form>
</div> <!--END search -->

</header>

TamarG · Answer 3 · 2016-03-03T12:02:15.360

0

Add vertical-align to CSS:

.logo {
   display:inline-block;  
   vertical-align:top 
 }

https://jsfiddle.net/2jf0a7oc/2/

edited Mar 03 '16 at 12:02

answered Mar 03 '16 at 11:59

TamarG

3,522
12
44
74

perhaps check the other answers to the question before contributing a duplicate answer. – Aaron Mar 03 '16 at 12:00
I was working on the code and writing it while there were no answers here at all. Only after posting it I saw that in those minutes there were added more answers. – TamarG Mar 03 '16 at 12:03

Extra white-space above search bar

3 Answers3