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

我想做到这一点：

但是在社交图标部分的顶部有不必要的空白。这个页面是实时的

我的标记：-

<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中删除“padding top:13px；”。

更改样式。CSS行：10到：

#top-social {
  float: right;
  text-align: right;
  vertical-align: middle;
  /*padding-top: 13px;*/
  width: 538px;
}

---

顶部有13个像素的填充。

带有

浮点：right

的元素将被前面的其他元素向下推。您可以通过更改标记将

#top social

和

nav

移动到

之前来解决此问题

然而，在这种情况下，我认为最好绝对地将顶部社会和nav定位到包含标题的右上角和右下角。这将允许您轻松获得社交链接下方的导航链接，并保持此外观

header {
    position: relative;
}
#top-social {
    position: absolute;
    top: 0px;
    right: 0px;
}

---

要实现布局，您需要将徽标图像向左浮动

请参见此

添加以下CSS：

---

这：

header>img{}

意味着属性将仅应用于您案例中的

标记的第一个子图像，即徽标图像，而不应用于社交图标。

请尝试图像上的float:left

header {
    position: relative;
}
#top-social {
    position: absolute;
    top: 0px;
    right: 0px;
}

header > img {
    float: left;
}