Member Avatar for buddyb

I've done all kind of reading and don't see anything about it. Is there any way to adjust spacing between the lines; anything remotely related to working in a page layout program? I'm trying to run headlines, but there's a ridiculous amount of space between lines. Any thoughts?
Thanks,
BuddyB

  • 3 Contributors
  • 4 Replies
  • 255 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by rus

Dani AI

Generated

The extra vertical space is almost always coming from two separate things: browser default margins on heading tags and the element’s line-height. As pointed out, CSS is the right place to fix it, but setting a fixed height on text is risky (it can clip lines). Treat line-height (distance between baselines) and margins (space above/below the block) independently.

Dreamweaver MX 2004 workflow that produces predictable results: open Window → CSS Styles, create or edit a rule for the heading tag or a custom class, then use the rule dialog’s Type tab to set a unitless line-height (keeps scaling with font-size) and the Box tab to tighten top/bottom margins. Save the rule to an external stylesheet and attach it to the page. If spacing still looks wrong, inspect the markup for wrapped <p> tags, extra <br>s or margins inherited from parent elements.

Example (put in an external stylesheet and apply the class to the heading):

/* external stylesheet */
h1.run-headline {
  margin: 0 0 0.35em 0;
  line-height: 1.05;
  font-weight: 700;
}

/* usage */
<h1 class="run-headline">Compact headline that runs across lines</h1>

Notes and cautions: prefer unitless line-height values (1.0–1.4 for most text; tighter for display headlines), avoid height on text elements, and consider a small CSS reset that zeroes default heading margins before applying tuned margins for each heading level. Thanks to for the CSS pointer and for pointing toward beginner CSS resources.

Recommended Answers

All 4 Replies

Member Avatar for DaveSW

you need to use the css height or line-height properties. If you're familiar with the source you can use
<h1 style="line-height: 1em; height: 1em;">Heading 1 or other element</h1>

Member Avatar for buddyb

I'm ashamed to say I've not gotten into CSS yet :o, but I guess I'm about to begin. Thanks for the input.
BuddyB

Member Avatar for DaveSW

np - you won't regret learning css

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.