Member Avatar for Member #46692

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 Member #46692 because: n/a
  • 2 Contributors
  • 8 Replies
  • 122 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

The visible gap comes from browser defaults: headings are block-level elements and most user‑agent stylesheets give them built‑in vertical spacing. As noted, margins/padding are the usual culprit, but a few other things commonly cause surprises — for example, invalid markup (headings inside paragraph tags or stray <br/>s) and vertical margin collapsing between adjacent blocks. ’s sample suggests those exact patterns, so fixing the HTML structure should be the first check.

A short troubleshooting checklist that complements earlier replies:

  • Inspect the computed styles in the browser devtools to see which margin property (and which stylesheet) is contributing to the gap.
  • Look for parent or sibling elements that also carry vertical margins; adjacent vertical margins can collapse into a single larger gap. See the MDN notes on margin behavior for details: MDN — margin.
  • Verify fonts and line-height — different fonts or unusual line heights can change perceived spacing even when margins are small.

Practical options that avoid editing every heading by hand:

  • Apply a single rule for all headings (group selector) or use logical properties so spacing works with different writing modes.
  • Use an adjacent‑sibling rule to tune spacing only when one heading follows another (keeps other spacing intact). Example:
/* tune just the space when an H2 immediately follows an H1 */
h1 + h2 {
  margin-block-start: 0.25em;
}

/* establish a consistent vertical rhythm for all headings */
h1,h2,h3,h4,h5,h6 {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

For a safer blanket approach, prefer a normalization stylesheet rather than an aggressive reset so useful defaults (forms, lists) stay intact: Normalize.css.

Recommended Answers

All 8 Replies

Member Avatar for Member #46692

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 Member #46692

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 Member #46692

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

Edited by Member #46692 because: n/a
Member Avatar for almostbob

yep,

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

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.