How to remove extra space under paragraph in HTML/CSS

Question

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.

Answer 1

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/

Answer 2

That's the default padding/margin of p element, try using

.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

Answer 3

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 {
   margin: 0;
   padding: 0;
}

Answer 4

p stands for paragraph. the paragraph automaticly adds space like this: Fiddle

and you can remove it like this: fiddle

Answer 5

I can't tell you what your problem is, but from this fiddle: http://jsfiddle.net/u6C9E/

p { margin: 0; padding: 0; }

works.

Answer 6

If you have any image above and/or bottom of the paragraphs, make the paragraphs in two class.

HTML:

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

The 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...