Hello

 

I've been modding a theme for a test site (http://www.test1.communityradiotoolkit.net/) and it's going ok except for a couple of basic things. The headings and paragraphs are all close together. This applies especially to paragraphs where there's little differentiation between them. I'd be grateful if someone could look at this. I've attached a screen shot of what I'm seeing.

 

I can attach the css if you have trouble accessing it.

 

Ellie

You can edit the default margins and padding for h1 to h6 and p tags:-

 

h1 { margin: 0; padding: 8px 0; }
p { margin: 0; padding: 4px 0; }

 

which will make top & bottom the stated px and sides 0px; edit to what you want.

 

Or padding: 8px 0 4px 0; which is top right, bottom, left.

Just to elaborate on what Wickham said, the reason the paragraphs have no margin on them is because of this global reset rule:

 

* {

margin:0;

padding:0;

}

Thank you, I might get rid of the global reset (I wasn't sure that was it) first. If it sends the design a bit wonky then I'll try Wickham's solution. If you've got any feedback on the design I'd be grateful. I'm trying to get the most comfortable fonts with a modern design. If you look at http://www.communityradiotoolkit.net you'll see what I'm replacing.

I've nothing against global resets - I use Eric Myer's:

 

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

 

I only mentioned it in case you weren't aware why your margins were disappearing in the first place. A global reset is very useful, because my default there are padding, margin, and other styles applied to many HTML elements, and you will waste a lot of time creating CSS rules to overwrite them. It's faster, and gives you more control, to add styles only to the elements that need them.

 

To reset the paragraph margins to their default I would do as Wickham suggested, except my rule would be:

 

p {

margin:1.12em 0;

}

 

You might find this W3C page useful, it lists the defaults for all html elements:

 

http://www.w3.org/TR/CSS2/sample.html

There is a strange effect called margin collapse as described here:-

http://www.howtocreate.co.uk/tutorials/css/margincollapsing

so it's often better to make margins 0 and use padding for h1 to h6 an p tags.

 

One effect is often that a heading or p tag right at the top of a div box will have the margin extended out of the top of the box, pushing it down while the text is right at the top of the box but its margin is outside. A background for the box will therefore be lowered while the text is right at the top. You'll recognise the problem when you meet it!

There is a strange effect called margin collapse

 

I agree that collapsing margins can be confusing, but most of the time they create the desired result. For a long time I would only apply margins to the bottom of paragraphs and headings to avoid collapsing margins, but more recently I've started to embrace the collapse. The article you linked to has some good tips for working around some of the quirks arising from collapsing margins.

 

Different strokes for different folks!

 

it's often better to make margins 0 and use padding for h1 to h6 an p tags.

 

Personally I wouldn't use padding as a substitute for margin, because they serve quite different purposes. e.g. If you want a padded colored background background on your headings AND a margin below them, then you are going to need to use both padding and margin to achieve the effect:

 

h2 {

background:#ff0000;

padding:10px;

margin:1em 0;

}