Question

我在图片和分享我们之间有一个余地，我不知道它来自哪里。 img：https://liko.tinytake.com/sf/MTU4MjUyXzk4ODk1MA

我的HTML5代码：

<div id="socailMedia">
   <p>Follow us:</p>
   <div id="followImg">
       <img src="socailMedia/facebook.png" alt="followFacebook">
       <img src="socailMedia/twitter.png" alt="followTwitter">
       <img src="socailMedia/instagram.png" alt="followInstagram">
       <img src="socailMedia/pinterest.png" alt="followPinterest">
       <img src="socailMedia/google.png" alt="followGoogle">
    </div>
    <p>Share us:</p>
</div>

我的CSS代码：

#socailMedia{
    color:#939393;
    width: 350;
    float:left;
    margin-left: 20;
}
#socailMedia p {
     margin: 0;   
    background-color: red;
}
#followImg img{
    background-color: red;
    height: 35;
    padding:0;
    margin: 0;
}

Answer 1

也许来自封闭的“followImg”div。您已取消嵌套img标记的margin属性，但尚未解决其包含的div。根据CSS的继承方式，可能还会涉及填充。您可以使用Chrome，Safari或Firefox中的Web检查器查看这些元素的活动属性，并更好地解决问题。

以下可能就是所需要的：

#followImg {
    padding: 0;
    margin: 0;
}

Answer 2

段落标记附带填充。试试这个：

<div id="socailMedia">
   <p>Follow us:</p>
   <div id="followImg">
       <img src="socailMedia/facebook.png" alt="followFacebook">
       <img src="socailMedia/twitter.png" alt="followTwitter">
       <img src="socailMedia/instagram.png" alt="followInstagram">
       <img src="socailMedia/pinterest.png" alt="followPinterest">
       <img src="socailMedia/google.png" alt="followGoogle">
    </div>
    <p style="margin:0;">Share us:</p> <!-- CHANGE THIS -->
</div>

Answer 3

您需要将vertical-align: bottom添加到#followImg img元素：

＆＃13;

#socailMedia {
  color: #939393;
  width: 350;
  float: left;
  margin-left: 20;
}
#socailMedia p {
  margin: 0;
  background-color: red;
}
#followImg img {
  background-color: red;
  height: 35;
  padding: 0;
  margin: 0;
  vertical-align: bottom;
}

＆＃13;

<div id="socailMedia">
  <p>Follow us:</p>
  <div id="followImg">
    <img src="http://dummyimage.com/35x35/FC0/000" alt="followFacebook">
    <img src="http://dummyimage.com/35x35/FC0/000" alt="followTwitter">
    <img src="http://dummyimage.com/35x35/FC0/000" alt="followInstagram">
    <img src="http://dummyimage.com/35x35/FC0/000" alt="followPinterest">
    <img src="http://dummyimage.com/35x35/FC0/000" alt="followGoogle">
  </div>
  <p>Share us:</p>
</div>

＆＃13;

默认情况下，图像与基线对齐，基线位于父母底部上方几个像素的位置。将垂直对齐设置为底部将使图像与段落的底部对齐。

这个边际来自哪里？

3 个答案: