Question

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

enter image description here

看到你好和图像之间有多余的垂直空间？我该如何删除？我知道我绝对可以将图像放得更接近你好，但我想知道造成这个空间的原因。

我的代码：

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/

Answer 2

这是p元素的默认填充/边距，请尝试使用

.Box p {
   margin: 0;
   padding: 0;
}

如果您想要快速解决方案而不是使用

，则应在设计任何网页之前重置浏览器默认值

* {
   margin: 0;
   padding: 0;
}

满足您的需求，您也可以谷歌搜索CSS重置样式表，这些样式表将精确重置每个元素

Answer 3

将<p>标记的填充和边距顶部/底部设置为0. <p>标记自动设置默认的填充/边距，以防您不用其他内容覆盖它。

p {
   margin: 0;
   padding: 0;
}

Answer 4

p代表段落。 paragraph会自动添加如下空格：Fiddle

您可以将其删除：fiddle

Answer 5

我不能告诉你你的问题是什么，但是从这个小提琴：http://jsfiddle.net/u6C9E/

p { margin: 0; padding: 0; }

作品。

Answer 6

如果段落的上方和/或底部有任何图像，请将段落分为两类。

HTML：

<p> class="first">Your 1st Paragraph</p>
<p> class="second">Your 2nd Paragraph</p>

CSS：

    p.first {
        text-indent: 2em;
        margin-bottom: -5%;
    }
    p.second {
        margin-top: -5%;
        text-indent: 2em;
    }

使用＆＃34; ％＆＃34;让它在响应式网络上看起来仍然很好......

如何删除HTML / CSS中段落下的额外空间

6 个答案: