Why is there so much space between
and

Question

I don't get it. Why is there so much space between "title" and "text"? Please take a look at this code:

 <h3 style="background:#000">Title</h3>
        <p class="d" style="background:#000">
       Text Text Text Text Text Text Text Text Text Text Text 
        </p>

There are absolutely no other styles applied to those two elements, but still, there are so much unused space. Anyone have an idea here?

enter image description here

`h3` tag has default top & bottom margins. Hence the space. Learn to use Developer console in your browser to debug such issues. — Vikram Deshmukh, Dec 17 '13 at 12:40
I've just tried in newest firefox, chrome, and IE 8. All browsers show the same as this browser ( chrome ) — rootpanthera, Dec 17 '13 at 12:42

score 8 · Accepted Answer · answered Dec 17 '13 at 12:41

8

The caption tags (<h1>, <h2>, ...) have a default padding and margin applied to them. The same is for the paragraph <p>

If you want to remove those default spacing add the following style to the captions and paragraphs inside your css or element:

padding: 0; margin: 0;

answered Dec 17 '13 at 12:41

RononDex

4,143
22
39

1

Nice answer RononDex! Also, check this useful article (about what's the default margin of headers elements): http://www.htmlcssdeveloper.com/tutorial/advanced-html-css/what-is-the-default-margin-of-h1-h2-h3-h4-h5-h6.html – Paladini Dec 17 '13 at 12:42

score 7 · Answer 2 · answered Dec 17 '13 at 12:42

7

try to give margin:0 for h3 and p

answered Dec 17 '13 at 12:42

radha

782
4
8

score 4 · Answer 3 · answered Dec 17 '13 at 12:44

Css Resets should usually be applied to CSS code so that your styling is only affected by what you put in, not default styling. http://www.cssreset.com/ contains some nice resets you may choose to use. This occurs as default margins set on headings are showed, a simple style of:

h3 {
padding:0;
margin:0;
}

Would resolve for this specific element only, thus the css resets come in handy for resetting all HTML elements to be without style.

score 1 · Answer 4 · answered Dec 17 '13 at 12:43

1

You have to use reset.css to eliminate the default margin and padding. meyerweb's reset css can be a good start.

answered Dec 17 '13 at 12:43

kta

19,412
7
65
47

score 1 · Answer 5 · answered Dec 17 '13 at 14:19

1

It's because <p> is a paragraph. And by default paragraph has margin-top: 1em; and margin-bottom: 1em;. <h1> - <h6> is a heading tags, and by default it has margin-top and margin-bottom from 2.33em to 0.67em

answered Dec 17 '13 at 14:19

DADE

90
1
1
8

Why is there so much space between and

and

5 Answers5

Why is there so much space between
and