Changing spacing on <H1> using CSS?

Dev Shed Forums Sponsor:

November 24th, 2002, 12:52 PM

Chiles4

Contributing User

Join Date: Aug 2002

Location: Nuevo Mexico, U.S.

Posts: 86

Time spent in forums: 1 h 26 m 38 sec
Reputation Power: 11

Changing spacing on <H1> using CSS?

I've got a line of defined as "h1" and I'd like to stop it from spacing itself so far away from the following text. Ideally, I'd like to stop it from performing a line-break too but that's probably asking too much.

I've tried the line-height property in CSS but it did nothing in this situation. Anyone know how to affect the behavior of the <h1> tag using CSS?

I know I can do whatever I want with the text but in this case I need to do it with the "h1" tag.

November 24th, 2002, 02:00 PM

degsy

Contributing User

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Nov 2001

Posts: 1,882

Time spent in forums: 5 Days 21 h 19 m 30 sec
Reputation Power: 18

Change the margins with CSS
Because the element after the Header will also have margins you also have to alter it's margins.

<h1 style="margin: 0px;">Header H1</h1>
<p style="margin: 0px;">Paragraph </p>

or

<h1 style="margin-bottom: 0px;">Header H1</h1>
<p style="margin-top: 0px;">Paragraph</p>

November 24th, 2002, 03:37 PM

adios

Senior Citizen

Join Date: Jan 2001

Location: leftcoast

Posts: 2,019

Time spent in forums: < 1 sec
Reputation Power: 15

Also:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<style type="text/css">

h1.inline {
display: inline;
}

h1.short {
line-height: 0%;
}

h1.styled {
font: bold 32px monospace;
color: #cc3300;
}

</style>
</head>
<body>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
<h1>Normal HTML H1 element</h1>
blah blah blah <h1 class="inline">"Inline" H1 element </h1>blah blah blah blah blah blah
<h1 class="short">"Short" H1 element</h1>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
<h1 class="styled">• "Styled" H1 element •</h1>
</body>
</html>

December 3rd, 2002, 09:10 AM

Chiles4

Contributing User

Join Date: Aug 2002

Location: Nuevo Mexico, U.S.

Posts: 86

Time spent in forums: 1 h 26 m 38 sec
Reputation Power: 11

The display: inline worked great. Actually it was the only thing I needed to add because I had already styled the h1 text to be the same as the surrounding text.

Thanks for both your inputs. My CSS search had come up empty and I knew of line-height but for some odd reason I could not get it to work.

Viewing: Dev Shed Forums > Web Design > CSS Help > Changing spacing on <H1> using CSS?

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump