CODEWITHSUNDEEP
htmlcss
rootpanthera
rootpanthera

Reputation: 2771

Why is there so much space between <h3> and <p>

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

Upvotes: 6

Views: 6482

Answers (5)

DADE
DADE

Reputation: 100

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

Upvotes: 1

JaanRaadik
JaanRaadik

Reputation: 571

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.

Upvotes: 4

kta
kta

Reputation: 20140

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

Upvotes: 1

radha
radha

Reputation: 782

try to give margin:0 for h3 and p

Upvotes: 7

RononDex
RononDex

Reputation: 4183

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;

Upvotes: 8

Related Questions