如何删除 HTML/CSS 中段落下的多余空格

Question

使用 HTML 和 CSS，我在 ap 标签和图像之间有这个垂直空间。它看起来像这样：

看到“你好”和图像之间额外的垂直空间了吗？我该如何删除它？我知道我绝对可以将图像定位得更靠近“你好”，但我想知道是什么造成了这个空间。

我的代码：

HTML：

<div class="Box">
    <p> hello </p><img class="contextimg" WIDTH="50" HEIGHT="50"  SRC="pic.jpg">
</div>

CSS：

.Box                           //this is the parent div
{
    background-color:red;
    width:60px;
    margin:0px;
    margin-bottom: 0px;
    padding:0px;


}
.contextimg                            //this is for the image
{
    position:relative;
    margin:0px;
    padding:0px;
    line-height:0px;

}

注意：我也尝试将正文的边距和填充设置为 0，但没有成功。

Answer 1

浏览器为段落提供默认边距是很常见的。所以就把它拿走吧。

将<p>边距设为 0：

.Box p{
    margin: 0;
}

在这里检查： http: //jsfiddle.net/aG27X/