如何删除HTML / CSS中的段落下的额外空间 [英] How to remove extra space under paragraph in HTML/CSS

问题描述

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

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

我的代码：

HTML：

 < div class =Box> 
< p> hello< / p>< img class =contextimgWIDTH =50HEIGHT =50SRC =pic.jpg> 
< / div> 
  

CSS：

  .Box //这是父div 
 {
 background-color：red; 
 width：60px; 
 margin：0px; 
 margin-bottom：0px; 
 padding：0px; 
 
 
} 
 .contextimg //这是图像
 {
 position：relative; 
 margin：0px; 
 padding：0px; 
 line-height：0px; 
 
} 
  

注意：我也尝试设置主体的边距并填充到0，但它不起作用。

解决方案

浏览器为段落提供默认边距是很常见的。

给< p> 保证金0：

  .Box p {
 margin：0; 
 
  

在此处查看： http://jsfiddle.net/aG27X/

With HTML and CSS I have this vertical space between a p tag and an image. It looks like this:

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.

My code:

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;

}

Note: I've also tried to set the body's margin and padding to 0 but it didn't work.

解决方案

It's common for browsers to give paragraphs a default margin. So just take it away.

Give the <p> a margin of 0:

.Box p{
    margin: 0;
}

Check it here: http://jsfiddle.net/aG27X/

这篇关于如何删除HTML / CSS中的段落下的额外空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！