html - 显示内联 block 在第二个 div 上方有间隙

Question

我在显示内联 block 时遇到一点问题，基本上我有 2 个 div，我想将它们彼此相邻放置，但是第二个 div 上方有一个名为 (#store_header_text) 的间隙，我不知道为什么会有差距 - 我似乎无法理解这个问题。

我已经尝试删除position:absolute和相对于它周围的其他 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 id 中

JsFiddle