html - 如何删除 HTML/CSS 中段落下的多余空间

Question

对于 HTML 和 CSS，我在 p 标签和图像之间有这个垂直空间。它看起来像这样:

看到你好和图片之间的额外垂直空间了吗？我该如何删除它？我知道我绝对可以将图像放在更靠近 hello 的位置，但我想知道是什么导致了空间。

我的代码:

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/