删除图像和 div 之间的空间答案

【问题标题】：Remove space between image and div删除图像和 div 之间的空间
【发布时间】：2014-02-04 05:06:33
【问题描述】：

我试过 display: block; 和 vertical-align: bottom;

两者都不会删除图像和 div 之间的空间。

我正在使用 HTML5 和外部 CSS 样式表。

HTML：

    <p id="missionMembers">
        <img src="" border"0"/>
    </p>

    <div id="footer">
        <div class="twitter-hover social-slide"> </div>
        <div class="facebook-hover social-slide"> </div>
        <a href= "http://www.youtube.com/channel/UCQUQ1EHTu705qdNWaFAz0SA"/> <div class="youtube-hover social-slide"> </div></a>
    </div>

CSS：

#missionMembers {
    text-align: center;
    margin: 0em 0em 0em 0em;
    padding: 0em 0em 0em 0em;
    vertical-align: middle;
    font-size: 0;
    display: block;
}

#footer {
    padding-left: 2em;
    padding-right: 2em;
    margin: 0em 0em 0em 0em;
    background-color:black; 
    height: 68px;
    width: 2000px;
    border: 0em 0em 0em 0em;
    vertical-align: top;
}

（#missionMembers 是图像。#footer 是 div。）

【问题讨论】：

你必须显示一些代码兄弟。
请出示您的代码
作为参考，最佳实践是在设置为空时使用0 而不是0em 0em 0em 0em 作为边距、边框、内边距。
因为零基本上没有单位。
@Jonathan 我把0em 0em 0em 0em改成了0，但还是有空格

标签： css image html margin padding

【解决方案1】：

这可能是一个解决方案：

#missionMembers {
 text-align: center;
 margin: 0;
 padding: 0;
}

#missionMembers img {
 display: block;
}

#footer {
 padding: 0 2em;
 margin: 0;
 background-color:black; 
 height: 68px;
 width: 2000px;
 border: 0;
}

【讨论】：

我仍然看到空间，但现在图像不再居中
将margin:0 auto; 包含到#missionMembers img { 中，图像将居中。
但是，我仍然面临空间问题
@Jonathan 我看到它可以在 JSFiddle 中运行，但是当我将它复制并粘贴到我的代码中并在 Google Chrome 中预览时，空间仍然存在。
@Jonathan 是否与我将页脚的宽度更改为 2000px 的事实有关？我设置它的唯一原因是因为我不知道如何正确创建一个适合浏览器窗口的 div，所以我创建了一个比它更长的 div（2000px') and set the overflow-x` 隐藏在 body { 中。有没有更好的解决方案，这样它就不会乱了#footer div 如果实际上是这样做的？