如何在 HTML/CSS 中删除段落下的多余空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16561161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove extra space under paragraph in HTML/CSS
提问by r1nzler
With HTML and CSS I have this vertical space between a p tag and an image. It looks like this:
使用 HTML 和 CSS，我在 ap 标签和图像之间有这个垂直空间。它看起来像这样：
See that extra vertical space between the hello and the image? How do i remove that? I know I can absolutely position the image closer up to the hello but I would like to know what's causing the space.
看到 hello 和图像之间额外的垂直空间了吗？我如何删除它？我知道我绝对可以将图像定位得更靠近你好，但我想知道是什么导致了空间。
My code:
我的代码：
HTML:
HTML：
<div class="Box">
<p> hello </p><img class="contextimg" WIDTH="50" HEIGHT="50" SRC="pic.jpg">
</div>
CSS:
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;
}
Note: I've also tried to set the body's margin and padding to 0 but it didn't work.
注意：我还尝试将正文的边距和填充设置为 0，但没有奏效。
回答by George
It's common for browsers to give paragraphs a default margin. So just take it away.
浏览器通常为段落提供默认边距。所以干脆把它拿走。
Give the <p>a margin of 0:
将<p>边距设为 0：
.Box p{
margin: 0;
}
Check it here: http://jsfiddle.net/aG27X/
在这里检查：http: //jsfiddle.net/aG27X/
回答by Mr. Alien
That's the default padding/margin of pelement, try using
这是p元素的默认填充/边距，尝试使用
.Box p {
margin: 0;
padding: 0;
}
You should reset browser defaults before designing any webpage, if you want a quick solution than using
如果您想要一个快速的解决方案而不是使用，您应该在设计任何网页之前重置浏览器默认值
* {
margin: 0;
padding: 0;
}
Will suffice your needs, you can also google out for CSS reset stylsheets, these stylesheets will reset each elements precisely
将满足您的需求，您也可以搜索 CSS 重置样式表，这些样式表将精确重置每个元素
回答by Garrin
Set the padding and margin top/bottom of the <p>tag to 0. <p>tags automatically have a default padding/margin set, in case you dont overwrite it by something else.
将<p>标签的内边距和边距顶部/底部设置为 0。<p>标签会自动设置默认的内边距/边距，以防您没有被其他内容覆盖。
p {
margin: 0;
padding: 0;
}
回答by DiederikEEn
回答by user2385009
I can't tell you what your problem is, but from this fiddle: http://jsfiddle.net/u6C9E/
我不能告诉你你的问题是什么，但从这个小提琴：http: //jsfiddle.net/u6C9E/
p { margin: 0; padding: 0; }
works.
作品。
回答by Mangalecx
If you have any image above and/or bottom of the paragraphs, make the paragraphs in two class.
如果您在段落上方和/或底部有任何图像，请将段落分成两类。
HTML:
HTML：
<p> class="first">Your 1st Paragraph</p>
<p> class="second">Your 2nd Paragraph</p>
The CSS :
CSS ：
p.first {
text-indent: 2em;
margin-bottom: -5%;
}
p.second {
margin-top: -5%;
text-indent: 2em;
}
Use "%" to let it still looking good in responsive web...
使用“ %”让它在响应式网络中仍然看起来不错......
