[RESOLVED] DIV Spacing
I'm just getting into HTML and CSS and have a problem with setting the spacing between divs. I've tried to use top and left to position the boxes rather than making use of margins and padding. I'm more used to this method from my Excel UserForm use.
So for demo purposes of my problem I've created three divs, one above the other each with div inside containing a label. I can get the specified 40px distance at the top of the upper div but not with the middle and low divs, i.e. they are touching. Can this be done with using "top" or do I have to resort to margins and padding. My demo code is as follows:
<link rel="stylesheet" type="text/css" href="DivTest.css" />
<div class="lblLabel">TOP DIV</div>
<div class="lblLabel">CENTER DIV</div>
<div class="lblLabel">BOTTOM DIV</div>
/***** Outer div class *****/
border: 1px solid red;
/***** Inner div class *****/
border: 1px solid blue;
/***** Label class *****/
You definitely want to use margins in this case. Top is tricky because it acts weird with the height. To get your desired affect, you'd have to add a different "top" to each of the outer divs. Each one would need to be increased by the desired margin. In this case, 40px. So the first div would be top: 40px, the second would need to be top: 80px and the third would be top: 120px. As you can see, that's just dumb!
Seems silly not to do things the correct way just because you're "used to this method from my Excel UserForm use."
Here's a link to get the desired results using your method:
And here's the same method but using margins:
Thanks for quick reply. You've convinced me, I should use margins. Also, I guess margins would be better to use for inserting more divs later on. Everything would just move down. Thanks again.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)