Forum Moderators: not2easy

Message Too Old, No Replies

p and br tags used for random spacing

         

hmmdinger

6:30 pm on Oct 26, 2004 (gmt 0)

10+ Year Member



On a large site I recently added the following line to the site's master style sheet:

p{ margin: 0 0 1.2em 0; line-height: 120% }

The intent was to make spacing the same on all browsers. This works great in article-style copy, but on many other pages where the <p> tag was being used, it has created some problems.

Is my style sheet declaration a step forward or is it asking for trouble? Should I assume any places where existing <p> tags are now exhibiting unwanted spacing should be addressed differently?

Is this a stupid question? :)

zooloo

6:57 pm on Oct 26, 2004 (gmt 0)

10+ Year Member



Which is the most common?

If plain no spaced <p> then use a class for spaced text.

If spaced <p> is the most common use a class to over-ride the spacing.

That's my rule of thumb anyway.

zoo

choster

7:24 pm on Oct 26, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Remember, there are ways to select an element without needing to add a lot of IDs and classes, but this underscores the importance of using semantic markup. Suppose your document were structured as

<div id="header"><h1>Title</h1>
</div>
<div id="content">
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
<div id="footer">
<p>Colophon</p>
<p>Disclaimer</p>
</div>

It would be trivial to style the paragraphs in the main body different from those in the footer, e.g.

#content p {line-height: 1.2; text-indent: 1.5em; margin: 0 0 1.2em}
#footer p {font-size:0.75em; margin: 0.5em 3em}

hmmdinger

8:28 pm on Oct 26, 2004 (gmt 0)

10+ Year Member



Thanks for the replies. I was just trying to create a site-wide, cross-browser standard via the style sheet. It has created some issues in other places where <p> tags had just been thrown around things to create spacing. In the true nature of style sheets, I'm going to pay close attention to these anomalies and as I notice patterns, create additional style to handle them.