Member Avatar

When using css tags why is there such a gap

For example

<h1>title</h1>
<h2>subtitle</h2>

Why is there a massive vertical gap between the two <h1>and<h2> tags
... how can you get rid of it?

Edited by iamthwee because: n/a
  • 2 Contributors
  • forum 8 Replies
  • 99 Views
  • 6 Hours Discussion Span
  • comment Latest Post Latest Post by almostbob

Recommended Answers

Answered by almostbob 866 in a post from

margin:0; and or padding:0; nothing in your css overrides default spacing,

the manual, the online docs, at w3.org are very good, dont have the full link rattling round the empty space …

Jump to Post
Answered by almostbob 866 in a post from

yep,

Jump to Post

All 8 Replies

Member Avatar

For example my css is:

h1 {text-align:left;
    font-family:Arial,"Times New Roman";
    font-size:0.8em;
    font-style:normal;
    font-weight:bold;
   }

h2 {text-align:left;
    font-family:Tahoma,"Times New Roman";
    font-size:1.1em;
    font-style:normal;
    font-weight:bold;
    color:#0099CC;
   }

h3 {text-align:left;
     font-family:Arial;
    font-size:0.8em;
    font-style:normal;
    font-weight:normal;
    color:#333333;
   }

But when I use it in my html body tags it makes a paragraph space between each css tag. How do I remove this gap?

Member Avatar

margin:0; and or padding:0; nothing in your css overrides default spacing,

the manual, the online docs, at w3.org are very good, dont have the full link rattling round the empty space on my neck

Edited by almostbob because: n/a
Member Avatar

Thanks can you give me an example.

Member Avatar 
h1 { text-align:left;font-family:Arial,"Times New Roman";font-size:0.8em;font-style:normal;font-weight:bold;
margin-top:0;margin-left:auto;margin-right:auto;margin-bottom:0; } // the new bit
h1:first-letter {font-size:200%;font-style:bold;float:left;}//playtime

centrs the h1 on the page left/right(if smaller than full width) no margins top bottom so the next div butts close, and creates a drop cap because I like drop caps
removing margins from one element may leave a margin, if the next element has a margin, <div><p> etc

Edited by almostbob because: n/a
Member Avatar

A ha... Do you have to add that new line to EACH <h#> tag?

Edited by iamthwee because: n/a
Member Avatar

yep,

Edited by almostbob because: n/a
commented: Props +15
Member Avatar

Cheers..

Member Avatar

if you want to ensure margins you can

* { margin:0;} // all elements
// or
h* {margin:0;margin-left:auto;margin-right:auto;} //all h elements

in the top of the css file, preset all the element margins to 0
then everything will butt up unless and untill you give the element some spacing deliberately

Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.

Sign Up — It's Free!