1

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

在此处输入图像描述

看到 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，但没有成功。

4

6 回答 6

5

浏览器通常会为段落提供默认边距。所以把它拿走。

将<p>边距设为 0：

.Box p{
    margin: 0;
}

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

于 2013-05-15T09:19:27.903 回答
4

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

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

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

* {
   margin: 0;
   padding: 0;
}

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

于 2013-05-15T09:19:51.377 回答
1

将标签的填充和边距顶部/底部设置<p>为 0。<p>标签自动设置默认填充/边距，以防您不被其他东西覆盖。

p {
   margin: 0;
   padding: 0;
}
于 2013-05-15T09:20:29.823 回答
1

p代表段落。像paragraph这样自动添加空间：小提琴

你可以像这样删除它：fiddle

于 2013-05-15T09:21:07.117 回答
0

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

p { margin: 0; padding: 0; }

作品。

于 2013-05-15T09:22:10.050 回答
0

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

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;
    }

使用“ % ”让它在响应式网络中仍然看起来不错...

于 2014-12-30T12:19:33.387 回答