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:

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."