Create space between div elements 2

[IT4EVR]

I'm trying to learn the technique of CSS to arrange layout of pages instead of using the customary fallback of tables. The suggestion was to use DIV elements and then tie the formatting of the DIV to CSS classes.

I am creating a columnar type form with several rows. I want the space between rows of DIV elements to be less than a <p>.

How do I precisely determine the space between div rows and can this be done in CSS? Thanks...

 

[cLFlaVA]

if you're displaying paragraphs of text, i suggest using the paragraph tag. all you need to do is tweak the styles (which you'd need to do anyway for divs).

try something like this:

p {
    padding: 10px;
    margin: 0;
}

<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[IT4EVR]

Actually I'm not doing paragraphs of text. I'm displaying a data-entry form with a label and text box for each row.

The way I handled this was to create a div class that had a padding-bottom:7px;

I think this will suit my needs.

<div class="divSpacer">
					<span class="divLabel">*Email</span> <input type="text">
				</div>
				<div class="divSpacer">
					<span class="divLabel">*First Name</span><input type="text">
				</div>

 

[cLFlaVA]

regardless, you achieved the same style using the padding and/or margins, did you not?



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ChrisHunt]

You should use the <label> element instead of those <div>s and <span>s, something like this

<label for="em">*Email <input id="em" type="text></label>
<label for="fn">*First Name <input id="fn" type="text></label>

with

label {
   display: block;
   padding: 0;
   margin: 10px 0; /* or whatever */
}

You can find a more sophisticated CSS-based form layout at

http://www.themaninblue.com/writing/perspective/2004/03/24/

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Vragabond]

And if you need to put it all in a block level element, consider fieldset instead of div.

 

[IT4EVR]

So what is wrong with using a span element? Doesn't a label map out to a span element once it is rendered?

I can understand your example where you are basically wiring the label to the following text field. Are you suggesting for forms I should use this method?

The reason I was enclosing the rows in <div> was so that I could apply a similar text formatting to both the label and the text box.

 

[Vragabond]

Label is an html element that is bound to the input element and is used as an explanation field for your input element. Chris' method allows user to click on a label or input element to give focus to the element. So in addition to the better semantics, that method provides some extra usability.

The label you're talking about is probably .NET server side label, which does become a span when rendered. However, that is just Microsoft being misguided, label is an actual html tag that should be used in these circumstances.