css - 为什么我的 div 顶部有不必要的间隙？

Question

我想实现这个:

但是社交图标 div 顶部有不必要的空白。该页面位于 http://goo.gl/K17Fjs。

我的标记:-

<header>
<img src="images/home-layout_02.jpg" alt="Salem Al Hajri Logo">
<div id="top-social">
Follow us on <img src="images/home-layout_05_01.jpg" alt=""><img src="images/home-layout_05_02.jpg" alt=""><img src="images/home-layout_05_03.jpg" alt="">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Projects</li>
<li>Photo Gallery</li>
<li>Contact</li>
</ul>
</nav>
</header>

我的 CSS:

body {
margin: 0 auto;
background-attachment: scroll;
/*background-image: url(images/home-layout_08.jpg);*/
background-repeat: repeat-x;
background-position: bottom;
}
header {width: 920px; margin: 0 auto;}
#top-social {float: right; text-align: right; vertical-align: middle; padding-top: 13px; width: 538px;}
nav {float: right; width: 538px; text-align: right; margin-top: 45px;}
nav li { display: inline;}

Answer 1

要实现您的布局，您需要将 Logo 图像向左浮动。

看到这个 FIDDLE

添加此 CSS:

header > img {
    float: left;
}

这个:header > img {}意味着属性将仅适用于 <header> 的第一个子图像在您的案例中标记 Logo 图像，而不是社交图标。