Дисплей встроенного блока имеет зазор над вторым div

Question

У меня проблема с дисплеем встроенного блока, в основном у меня есть 2 divs, и я хочу расположить их рядом друг с другом, однако есть пробел выше второго div called (#store_header_text) Я понятия не имею, почему есть пробел - я просто не могу показаться, что обдумываю это.

Я попытался удалить положение: абсолютное и относительное на других div вокруг него, однако это не имело никакого эффекта.

Here is Fiddle

Мой HTML:

<div id="store_header"> 

     <div id="store_header_logo"> 

      <a href="http://www.amazon.co.uk"> 
       <img class="store_header_img" src="/images/tiles/amazon.png" title="Amazon"></img> 
      </a> 


     </div> 

     <div id="store_header_text"> 
      Amazon Coupons & Deals 
     </div> 

</div> 

Мой CSS:

#store_header { 
    width:100%; 
    border:1px solid #ccc; 
    background-color:#fff; 
    border-radius:3px; 
    padding:5px; 
} 

#store_header_logo { 
    height: 100px; 
    width: 200px; 
    position: relative; 

    border:1px solid black; 
    display: inline-block; 


} 



#store_header_logo img { 
    max-height: 90px; 
    max-width: 180px; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    background: #3A6F9A; 
    position: absolute; 

    border:1px solid black; 




} 

#store_header_text { 
    height:100px; 
    width:300px; 
    line-height: 90px; 
    padding-left:20px; 
    font-size:25px; 
     font-family: 'Roboto', sans-serif; 
    font-weight:400; 
    color:#004d6e; 
    display: inline-block; 
    border:1px solid black; 


} 

Answer 1

без изменения ваших кодов много, добавьте

vertical-align: top; 

в ваших #store_header_logo идентификатор

JsFiddle

Answer 2

Оптимальной пару вещей. Измененный встроенный блок встраивать в основном

#store_header { 
 
    width: 100%; 
 
    border: 1px solid #ccc; 
 
    background-color: #fff; 
 
    border-radius: 3px; 
 
    padding: 5px; 
 
} 
 
.store_header_logo { 
 
    height: 100px; 
 
    width: 200px; 
 
    position: relative; 
 
    border: 1px solid black; 
 
    display: inline; 
 
} 
 
.store_header_logo img { 
 
    max-height: 90px; 
 
    max-width: 180px; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    background: #3A6F9A; 
 
    border: 1px solid black; 
 
} 
 
.store_header_text { 
 
    height: 100px; 
 
    width: 300px; 
 
    line-height: 90px; 
 
    padding-left: 20px; 
 
    font-size: 25px; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 400; 
 
    color: #004d6e; 
 
    display: inline; 
 
    border: 1px solid black; 
 
}

<div id="store_header"> 
 

 
    <div class="store_header_logo"> 
 

 
    <a href="http://www.amazon.co.uk"> 
 
     <img class="store_header_img" src="/images/tiles/amazon.png" title="Amazon"></img> 
 
    </a> 
 

 

 
    </div> 
 

 
    <div class="store_header_text"> 
 
    Amazon Coupons & Deals 
 
    </div> 
 

 

 

 

 

 
</div>