Giving space between div rows

HTML & CSS
1

http://www.gisic.com/test/test35.html

[b]test.35.html[/b]

<div style='float:left'>
<p style='background-color:pink'>
  p1-1
</p>
</div>

<div>
<p style='background-color:lightgreen'>
    p1-2
</p>
</div>

<div style='float:left'>
<p style='background-color:yellow'>
  p2-1
</p>
</div>

<div>
<p style='background-color:lightBlue'>
    p2-2
</p>
</div>

<div style='float:left'>
<p style='background-color:lightgreen'>
  p3-1
</p>
</div>

<div style='background-color:yellow'>
<p>
    p3-2
</p>
</div>

The code above produce 2 columns and 3 rows.

I like to give more space between the first row and the second row.

The following is one of my trials.
http://www.gisic.com/test/test36.html

[b]test.36.html[/b]

<div style='float:left'>
<p style='background-color:pink'>
  p1-1
</p>
</div>

<div>
<p style='background-color:lightgreen'>
    p1-2
</p>
</div>

<div style='float:left;[COLOR="Red"]height:50px[/COLOR]'>
<p style='background-color:yellow'>
  p2-1
</p>
</div>

<div style='[COLOR="red"]height:50px[/COLOR]'>
<p style='background-color:lightBlue'>
    p2-2
</p>
</div>


<div style='float:left'>
<p style='background-color:lightgreen'>
  p3-1
</p>
</div>

<div style='background-color:yellow'>
<p>
    p3-2
</p>
</div>
2

Use margin-top and margin-bottom in CSS.

3 

<div style='float:left'>
<p style='background-color:pink'>
  p1-1
</p>
</div>
 
<div>
<p style='background-color:lightgreen'>
    p1-2
</p>
</div>
 
[B][I][COLOR=darkred]<br />[/COLOR][/I][/B]
 
<div style='float:left;[COLOR=red]height:50px[/COLOR]'>
<p style='background-color:yellow'>
  p2-1
</p>
</div>
 
<div style='[COLOR=red]height:50px[/COLOR]'>
<p style='background-color:lightBlue'>
    p2-2
</p>
</div>
 
 
<div style='float:left'>
<p style='background-color:lightgreen'>
  p3-1
</p>
</div>
 
<div style='background-color:yellow'>
<p>
    p3-2
</p>
</div>

If one line beak is not enough add as many as you need.

Using padding or margin attrs all you do is making the content bigger and not spacing it.
You can apply these two attrs for the inside box.
Using height attr is the same (just make the content bigger).

Consider this scenario:
You have two divs.


   <div id="DivTop">content here</div>
   <div id="DivBottom">content here</div>

These two divs will be shown very closed at runtime.
But:


   <div id="DivTop">content here</div>
   <br />
   <br />
   <div id="DivBottom">content here</div>

will bring a two lines spacing between them at runtime.

See my point here?

4

Using padding or margin attrs all you do is making the content bigger and not spacing it.
Not true at all. Use margin and padding.

5

You’re telling me I’m wrong…but, in fact, you are!

Consider my above scenario one more time, please.

If you set the margin or the padding to a given div all you will do is creating a space inside the box and not outside the given box.

Isn’t that true?

6

no, it is not true

7

The box model article may explain things: http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41

Nadia

8

Padding is added inside the box, but is added to the specified content dimensions.

Margins are added outside the box. Adjacent vertical margins will collapse, unless the boxes involved are floated or positioned.

9

Now you (all) are right and I’m wrong !

But I still use the model I provided above instead of margin attr.
Because all web browser owners have their own point of view (implementation) on how to display a web page in a browser window and is more secure (IMO) to use that line breaks instead of margin attr.

that’s all…

10

It is not a point of view. That’s what margins/padding are for. Thinking margins and padding are inside the box is Microsoft’s “broken box model” which should never be used.

11

thinking that margins are inside the box is flat out wrong in all box models