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:

Thanks,

Code:
<html>
<head>
	<title>Div Test</title>
	<link rel="stylesheet" type="text/css" href="DivTest.css" />
</head>
<body>
	<div class="divOuter">
		<div class="divInner">
			<div class="lblLabel">TOP DIV</div>
		</div>
	</div>
	<div class="divOuter">
		<div class="divInner">
			<div class="lblLabel">CENTER DIV</div>
		</div>
	</div>
	<div class="divOuter">
		<div class="divInner">
			<div class="lblLabel">BOTTOM DIV</div>
		</div>
	</div>
</body>
</html>
Code:
/***** Outer div class *****/
.divOuter {
	height: 500px;
	left: 200px;
	top: 40px;
	width: 500px;
	background-color: #ffffff;
	border: 1px solid red;
	margin: 0px;
	padding: 0px;
	position: relative;
}

/***** Inner div class *****/
.divInner {
	height: 300px;
	left: 100px;
	top: 100px;
	width: 300px;
	background-color: #ffffff;
	border: 1px solid blue;
	position: absolute;
}

/***** Label class *****/
.lblLabel {
	height: 30px;
	left: 20px;
	top: 40px;
	width: 200px;
	font-family: "Arial";
	font-size: 24pt;
	font-weight: bold;
	background-color: #ffffff;
	color: #0000ff;
	position: absolute;
}