[英]How to remove extra space under paragraph in HTML/CSS
With HTML and CSS I have this vertical space between ap tag and an image.使用 HTML 和 CSS,我在 ap 标签和图像之间有这个垂直空间。 It looks like this:它看起来像这样:
See that extra vertical space between the hello and the image?看到 hello 和图像之间额外的垂直空间了吗? 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.我知道我绝对可以将图像定位得更接近你好,但我想知道是什么导致了空间。
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,但没有奏效。
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/
That's the default padding/margin of p
element, 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 重置样式表,这些样式表将精确重置每个元素
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;
}
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.作品。
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...使用“ % ”让它在响应式网络中仍然看起来不错......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.