Member Avatar for daviddoria

I have some sections like:

<h3>EngineeringNotes.net</h3>
<br>I have never ....

(see this page: http://www.rpi.edu/~doriad/Personal.html)

Why is there such an enormous space between the header and the text? I thought <br> should just insert a single line break?

Thanks,

Dave

  • 2 Contributors
  • 2 Replies
  • 83 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by daviddoria

Dani AI

Generated

Large gaps under headings most often come from browser default heading margins and from using line breaks for layout. correctly highlighted that block-level spacing is involved, and fixed the symptom by changing the stylesheet. For a robust solution, control vertical rhythm in CSS (rather than inserting <br> for spacing) and inspect the computed styles to see which margins the browser applies.

A simple, practical approach is to normalize heading spacing and set a consistent line-height. Example:

/* remove UA defaults and establish a consistent vertical rhythm */
h1,h2,h3,h4,h5,h6 {
  margin: 0 0 0.5rem 0;
  line-height: 1.25;
}

/* writing-mode-aware tweak for a single level */
h3 {
  margin-block-end: 0.4rem;
}

Troubleshooting tips: use browser devtools to view the computed margin values and to see whether the gap comes from the heading, the following element, or collapsed margins between them. For background reading on these behaviors, see MDN's guide to collapsing margins (Mastering margin collapsing) and the line-break element (br element).

Recommended Answers

All 2 Replies

Member Avatar for almostbob

h3 is a block element, </h3> ends the block with whatever margins and padding are set for the h3 and the adjacent element
</h3><br> is 2 Breaks, thats what you got

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

I removed the <br>'s: http://www.rpi.edu/~doriad/Personal.html

but the space was still huge. I then changed margin-bottom from 30px to 10px in the .css file and all is well :)

Thanks!

Dave

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.