Member Avatar for iamthwee

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
  • 8 Replies
  • 112 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for iamthwee

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 for almostbob

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 for iamthwee

Thanks can you give me an example.

Member Avatar for almostbob 
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 for iamthwee

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

Edited by iamthwee because: n/a
Member Avatar for almostbob

yep,

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

Cheers..

Member Avatar for almostbob

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 developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.