Subject: [css-d] What's the difference, when to use?

From: gsam at trini0.org (Gerard Samuel)
Date: Tue, 29 Apr 2003 11:06:45 -0400

Just beginning my journeys with CSS.
With <p> <div> and <span>, I've noticed that
<p> creates 2 line breaks before/after the open/close tags.
<div> creates 1 line break before/after the open/close tags.
<span> creates 0 line breaks before/after the open/close tags.

Im just looking for verification on this observation.
If Im correct, are there any rules as to when or when not to use these 
to gain a "special" effect.

For example, Im currently recoding an online poll, and Im trying not to 
use tables for layout.
The only way I can make the input and options line up in a line by line 
fashion is by ->
<input type="checkbox" name="option[]" value="foo" /><span>bar</span>
<div></div>
<input type="checkbox" name="option[]" value="foo" /><span>bar</span>

(Yes, they aren't styled, its just for show) So one can potentially 
control the space between options, style the option text,
and if I wrap the inputs in a <span>, or "class" the input tag, style 
the form inputs.

Thanks for any insight you may provide.

---

From: afternoon at uk2.net (Ben Godfrey)
Date: Tue, 29 Apr 2003 16:26:50 +0100

<span> and <div> are unstyled tags and contain no style properties, 
except that span is inline in it's display and div is block. This 
creates the effect you describe.

<p> on the other hand has more default properties. Commonly this 
involves a margin or padding area equal in height to one line. 
Different browsers define this standard style differently. IE PC places 
some space above and below the text, Moz places it all below. You can 
override this space with a rule like:

p { margin:0; padding:0; margin-bottom:1em; }

For your example, I would recommend something along the lines of the 
following:

<div class="f"> <input type="checkbox" name="option[]" value="foo" /> 
bar</div>
<div class="f" > <input type="checkbox" name="option[]" value="foo" /> 
bar</div>

And in your CSS:

.f { margin-bottom:1em; }

Or whatever presentation you desire.

HTH,

Ben

On Tuesday, Apr 29, 2003, at 16:06 Europe/London, Gerard Samuel wrote:

> For example, Im currently recoding an online poll, and Im trying not 
> to use tables for layout.
> The only way I can make the input and options line up in a line by 
> line fashion is by ->
> ______________________________________________________________________
> css-discuss [[email-masked]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>

(q)	Ben Godfrey?
(a)	Web Developer and Designer
	See http://aftnn.org/ for details

---

From: gsam at trini0.org (Gerard Samuel)
Date: Tue, 29 Apr 2003 13:55:01 -0400

Thanks to all those who replied.  It has become a little clearer for me.
I felt that what I was trying to do was cheat the system, and I didn't 
want to develop bad
habits from the start.
Now I think I understand why Eric Meyer requested to pull all <br> and 
&nbsp; tags out of
your html document when converting to CSS in the book "Eric Meyer on 
CSS" (excellent resource so far for me).
So back to work for me, till my next question :)