Setting paragraph margins using CSS, is it really this clunky?
Is there really no way to set a lot of margin-top and margin-bottom values for paragraphs without explicitly setting a class= for each paragraph where you want to change the default? Other things (like font-size and alignment) can be changed by wrapping a set of paragraphs in a <DIV>....</DIV> and setting the values in the DIV's class but margin-top and margin-bottom are not inherited so this doesn't work for margins. All I want to do is have a set of paragraphs with bigger margins than the default and it looks as if I'll have to do:- <P class=bigmargin>..............</P> for every paragraph, which rather defeats the object of using CSS, I might just as well write the margin size there. -- Chris Green
Chris, On 10 Sep 2007, at 12:51 pm, Chris G wrote:
Is there really no way to set a lot of margin-top and margin-bottom values for paragraphs without explicitly setting a class= for each paragraph where you want to change the default?
Other things (like font-size and alignment) can be changed by wrapping a set of paragraphs in a <DIV>....</DIV> and setting the values in the DIV's class but margin-top and margin-bottom are not inherited so this doesn't work for margins.
All I want to do is have a set of paragraphs with bigger margins than the default and it looks as if I'll have to do:-
<P class=bigmargin>..............</P>
for every paragraph, which rather defeats the object of using CSS, I might just as well write the margin size there.
How about: div#content p { /* set your css stuff here */ } All p tags within the div of id content will have the stuff defined above. Also, if you're writing XHTML, then you should have all of your parameters wrapped in quotes: <p class="bigmargin">....</p> Hope that helps, Dave -- David Reynolds david@reynoldsfamily.org.uk
On Mon, Sep 10, 2007 at 12:59:50PM +0100, David Reynolds wrote:
Chris,
On 10 Sep 2007, at 12:51 pm, Chris G wrote:
Is there really no way to set a lot of margin-top and margin-bottom values for paragraphs without explicitly setting a class= for each paragraph where you want to change the default?
Other things (like font-size and alignment) can be changed by wrapping a set of paragraphs in a <DIV>....</DIV> and setting the values in the DIV's class but margin-top and margin-bottom are not inherited so this doesn't work for margins.
All I want to do is have a set of paragraphs with bigger margins than the default and it looks as if I'll have to do:-
<P class=bigmargin>..............</P>
for every paragraph, which rather defeats the object of using CSS, I might just as well write the margin size there.
How about:
div#content p { /* set your css stuff here */ }
All p tags within the div of id content will have the stuff defined above.
Aha, thanks, that does it. It works for a class as well which is what I really wanted:- div.content p {/* set your css stuff here */ } It's the explicit 'p' that makes it work for paragraphs in the div block. It can even be reduced to:- .content p {/* set your css stuff here */ } for more general use.
Also, if you're writing XHTML, then you should have all of your parameters wrapped in quotes:
<p class="bigmargin">....</p>
Yes, I know, the sample wasn't actually pasted from real code. I don't write enough CSS/HTML to have the rules (and good practice) like this embedded in my fingers. -- Chris Green
On Monday 10 September 2007 12:51:02 Chris G wrote:
All I want to do is have a set of paragraphs with bigger margins than the default and it looks as if I'll have to do:-
<P class=bigmargin>..............</P>
for every paragraph, which rather defeats the object of using CSS, I might just as well write the margin size there.
If was being markup purist (apart from find the capital 'P' and the missing quote marks from the attribute value worrying) I would say that "bigmargin" is a bit of an odd class. Surely its more semantically pertinent to use values like "error" or "important"? But, to answer the question, you can probably do something like this: <div class="main-text"> <p> ... </p> <p> ... </p> </div> with CSS: .main-text p {margin-top:15px;margin-bottom:15px} This CSS rule selects all 'p's which are children of an element with the class "main-text". I haven't checked it, though. Cheers, Richard -- -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Richard Lewis http://www.richard-lewis.me.uk/ JID: ironchicken@jabber.earth.li -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
On Mon, Sep 10, 2007 at 01:06:32PM +0100, Richard Lewis wrote:
On Monday 10 September 2007 12:51:02 Chris G wrote:
All I want to do is have a set of paragraphs with bigger margins than the default and it looks as if I'll have to do:-
<P class=bigmargin>..............</P>
for every paragraph, which rather defeats the object of using CSS, I might just as well write the margin size there.
If was being markup purist (apart from find the capital 'P' and the missing quote marks from the attribute value worrying) I would say that "bigmargin" is a bit of an odd class. Surely its more semantically pertinent to use values like "error" or "important"?
But, to answer the question, you can probably do something like this:
<div class="main-text"> <p> ... </p> <p> ... </p> </div>
with CSS: .main-text p {margin-top:15px;margin-bottom:15px}
This CSS rule selects all 'p's which are children of an element with the class "main-text".
I haven't checked it, though.
No you haven't have you! :-) The above was *exactly* what I thought would work but it doesn't, as I explicitly pointed out margin settings are not inherited. Thus although other things set in class "main-text" will be set in those paragraphs the margins won't be. That was why I asked the question. With your code above the <div> block gets the 15px margins and the paragraphs get their previous default. -- Chris Green
On Mon, Sep 10, 2007 at 02:24:43PM +0100, Chris G wrote:
On Mon, Sep 10, 2007 at 01:06:32PM +0100, Richard Lewis wrote:
On Monday 10 September 2007 12:51:02 Chris G wrote:
All I want to do is have a set of paragraphs with bigger margins than the default and it looks as if I'll have to do:-
<P class=bigmargin>..............</P>
for every paragraph, which rather defeats the object of using CSS, I might just as well write the margin size there.
If was being markup purist (apart from find the capital 'P' and the missing quote marks from the attribute value worrying) I would say that "bigmargin" is a bit of an odd class. Surely its more semantically pertinent to use values like "error" or "important"?
But, to answer the question, you can probably do something like this:
<div class="main-text"> <p> ... </p> <p> ... </p> </div>
with CSS: .main-text p {margin-top:15px;margin-bottom:15px}
This CSS rule selects all 'p's which are children of an element with the class "main-text".
I haven't checked it, though.
No you haven't have you! :-)
The above was *exactly* what I thought would work but it doesn't, as I explicitly pointed out margin settings are not inherited. Thus although other things set in class "main-text" will be set in those paragraphs the margins won't be. That was why I asked the question.
Err, that's not doing inheretence... it's selecting all p's that are in a container with a class of "main-text"... If he'd said: .main-text { margin-top: 15px; margin-bottom: 15px; } then you'd be alright with the above statement...
With your code above the <div> block gets the 15px margins and the paragraphs get their previous default.
Err, no, they don't. (You didn't bother testing it either, did you...) Also, why the px measurements... it'd be better to use em or ex in this case... Thanks, -- Brett Parker
On 10 Sep 2007, at 2:24 pm, Chris G wrote:
No you haven't have you! :-)
The above was *exactly* what I thought would work but it doesn't, as I explicitly pointed out margin settings are not inherited. Thus although other things set in class "main-text" will be set in those paragraphs the margins won't be. That was why I asked the question.
Can I just point out, that I thought this didn't work either, but that was because 15px margin seems to be set by default and hence you couldn't notice any difference. Increasing the margin amounts allows you to see that his does work: http://david.reynoldsfamily.org.uk/chrisg/ Thanks, -- David Reynolds david@reynoldsfamily.org.uk
On Monday 10 September 2007 14:24:43 Chris G wrote:
On Mon, Sep 10, 2007 at 01:06:32PM +0100, Richard Lewis wrote:
with CSS: .main-text p {margin-top:15px;margin-bottom:15px}
I haven't checked it, though.
No you haven't have you! :-)
Have now.
The above was *exactly* what I thought would work but it doesn't,
Yes it does.
as I explicitly pointed out margin settings are not inherited. Thus although other things set in class "main-text" will be set in those paragraphs the margins won't be. That was why I asked the question.
Not true.
With your code above the <div> block gets the 15px margins and the paragraphs get their previous default.
Not true. The child <p>s are given the margins, /not/ the parent element with class "main-text".
On Mon, Sep 10, 2007 at 12:59:50PM +0100, David Reynolds wrote:
div#content p { /* set your css stuff here */ }
Aha, thanks, that does it. It works for a class as well which is what I really wanted:-
div.content p {/* set your css stuff here */ }
That means exactly the same as the example I gave. The only difference is that David has only selected <p> children of /<div>s/ with class "content".
It's the explicit 'p' that makes it work for paragraphs in the div block.
It can even be reduced to:-
.content p {/* set your css stuff here */ }
for more general use.
Giving /exactly/ what I had. Richard. -- -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Richard Lewis http://www.richard-lewis.me.uk/ JID: ironchicken@jabber.earth.li -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
On Mon, Sep 10, 2007 at 02:50:42PM +0100, Richard Lewis wrote:
On Monday 10 September 2007 14:24:43 Chris G wrote:
On Mon, Sep 10, 2007 at 01:06:32PM +0100, Richard Lewis wrote:
with CSS: .main-text p {margin-top:15px;margin-bottom:15px}
I haven't checked it, though.
No you haven't have you! :-)
Have now.
The above was *exactly* what I thought would work but it doesn't,
Yes it does.
as I explicitly pointed out margin settings are not inherited. Thus although other things set in class "main-text" will be set in those paragraphs the margins won't be. That was why I asked the question.
Not true.
With your code above the <div> block gets the 15px margins and the paragraphs get their previous default.
Not true. The child <p>s are given the margins, /not/ the parent element with class "main-text".
On Mon, Sep 10, 2007 at 12:59:50PM +0100, David Reynolds wrote:
div#content p { /* set your css stuff here */ }
Aha, thanks, that does it. It works for a class as well which is what I really wanted:-
div.content p {/* set your css stuff here */ }
That means exactly the same as the example I gave. The only difference is that David has only selected <p> children of /<div>s/ with class "content".
Well it doesn't for me on Firefox. With the 'p' I get the larger margins I want, if I remove the 'p' I don't get the larger margins.
It's the explicit 'p' that makes it work for paragraphs in the div block.
It can even be reduced to:-
.content p {/* set your css stuff here */ }
for more general use.
Giving /exactly/ what I had.
No, it still has the 'p' which you didn't have. I'll post my HTML and CSS in a separate message. -- Chris Green
Chris G wrote:
On Mon, Sep 10, 2007 at 02:50:42PM +0100, Richard Lewis wrote:
On Monday 10 September 2007 14:24:43 Chris G wrote:
It can even be reduced to:-
.content p {/* set your css stuff here */ }
for more general use. Giving /exactly/ what I had.
No, it still has the 'p' which you didn't have.
Oh yes he did... On Mon, Sep 10, 2007 at 01:06:32PM +0100, Richard Lewis wrote:
.main-text p {margin-top:15px;margin-bottom:15px}
JD -- "Dear Paul, .. brackets - Saint, apparently - .., f*** off! Love and kisses, the Corinthians." - Eddie Izzard
On Monday 10 September 2007 16:35:10 Chris G wrote:
On Mon, Sep 10, 2007 at 02:50:42PM +0100, Richard Lewis wrote:
On Monday 10 September 2007 14:24:43 Chris G wrote:
On Mon, Sep 10, 2007 at 01:06:32PM +0100, Richard Lewis wrote:
with CSS: .main-text p {margin-top:15px;margin-bottom:15px}
.content p {/* set your css stuff here */ }
for more general use.
Giving /exactly/ what I had.
No, it still has the 'p' which you didn't have.
I know I shouldn't care about this, but I /did/ have a p! Look! You can see it on the sixth line of this email, a very clear, very obvious, very p-shaped p. Its glaring out at you! Its p-ishness is unequivocal! It couldn't be more p-like if I was having a pee, on a pea, in a p-shaped urinal in Peasville. P! Richard PS. p -- -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Richard Lewis http://www.richard-lewis.me.uk/ JID: ironchicken@jabber.earth.li -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
On Mon, Sep 10, 2007 at 05:07:54PM +0100, Richard Lewis wrote:
On Monday 10 September 2007 16:35:10 Chris G wrote:
On Mon, Sep 10, 2007 at 02:50:42PM +0100, Richard Lewis wrote:
On Monday 10 September 2007 14:24:43 Chris G wrote:
On Mon, Sep 10, 2007 at 01:06:32PM +0100, Richard Lewis wrote:
with CSS: .main-text p {margin-top:15px;margin-bottom:15px}
.content p {/* set your css stuff here */ }
for more general use.
Giving /exactly/ what I had.
No, it still has the 'p' which you didn't have.
I know I shouldn't care about this, but I /did/ have a p! Look! You can see it on the sixth line of this email, a very clear, very obvious, very p-shaped p. Its glaring out at you! Its p-ishness is unequivocal! It couldn't be more p-like if I was having a pee, on a pea, in a p-shaped urinal in Peasville.
P!
So you did! Sorry. -- Chris Green
OK, here's my actual CSS:- body { margin: 5% 5% 5% 5% } .indexlist { } .footer { align: center; font-size: large; font-style: italic; } img.picleft { margin-right: 5%; } .wp p { margin-top: 5%; margin-bottom: 5%; font-size: large; text-align: center; } ... and here's the bit of HTML that uses the "wp" class:- <div class="wp"> <p>Are you thinking about what you want to do in the future?</p> <p>Are you struggling to make a difficult decision?</p> <p>Are you really busy and havent got time to decide what to do?</p> <p><a href="./courses.html">Time to Decide</a> is a unique program to enable you to make decisions about your future.</p> </div> Now this gives me 5% margins above and below my paragraphs, however if I remove that 'p' from the ".wp p" in the CSS file then the wider margins disappear. This is using firefox 2.0.0.3 on Linux. It does the same in IE7 on Windows XP too. I'm quite willing to be told I've done something silly somewhere but, at the moment, I can't see it. -- Chris Green
participants (5)
-
Brett Parker -
Chris G -
David Reynolds -
Jon Dye -
Richard Lewis