7 replies [Last post]
mickyjtwin
Offline
newbie
Last seen: 8 years 34 weeks ago
Joined: 2006-01-03
Posts: 3
Points: 0

Quick and easy question.

I am using h1, h2 tags, but do not like the default space between it and the ensuing paragraph. How do I change the distance? I have tried margin and padding to no avail.

Thanks in advance,
Mick

Anonymous
Anonymous's picture
Guru

default h1, h2 styles

Show us what you have tried.

mickyjtwin
Offline
newbie
Last seen: 8 years 34 weeks ago
Joined: 2006-01-03
Posts: 3
Points: 0

default h1, h2 styles

h1
{
padding: 0px;
margin: 0px;
}

I'm not sure of any other selector that changes the space around the heading????

rmfred
Offline
Elder
Rock Springs, WY
Last seen: 1 year 44 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

default h1, h2 styles

<p> tag also has default values... maybe this is contributing to your problem

www.powerbitwebdesign.com Powerbit your custom web design company

mickyjtwin
Offline
newbie
Last seen: 8 years 34 weeks ago
Joined: 2006-01-03
Posts: 3
Points: 0

default h1, h2 styles

yeah, I thought of that also, but to no avail.

so basically, i'm trying to find out what the default value and selector is for h1.
It places a certain height above and below the text, but how to change it??

Anonymous
Anonymous's picture
Guru

default h1, h2 styles

Triumph wrote:
Show us what you have tried.
When I said that I mean actually show us. As in a link to your page or (less desirable) the entire code. All of it. It could be a lack of doctype issue.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 49 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

default h1, h2 styles

hx & p have default margin and no padding, thats approx.

margin: 1em 0;
padding: 0;

the smaller header numbers with large font-sizes will reduce that figure to maybe 0.7em 0.

You change it by setting your own margins and padding. If its not working for you, then something else is effecting things, be it another of your style rules or another element in your html. Without seeing the complete html & css is pretty difficult to know.

To prove what I say, make the following page and see what you get.

<style>
h1, h2, p { margin: 0; padding: 0;}
</style>
<body>
<h1>an h1 header</h1>
<h2>an h2 header</h2>
<p>a paragraph</p>
</body>

then remove the styles and view the page again and see how it looks.

Back to your current problem page, view it in firefox, use the web dev view styles or the dom inspector to check the applicable style rules and/or the computed style. That'll give you a pointer to where the problem is coming from.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 33 weeks 4 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

default h1, h2 styles

Collapsing margins ?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me