Why does the margin-top collapse?

Hi there:

I'm new to CSS.

In order to explain myself, I came up with this little piece of code, in the HTML, it is just two nested divs, the outer div has a class of outer and the inner has a class of inner

.outer {
	width: 200px;
	height: 200px;
	background: url(_images/grid.gif); /*This is just a grid*/
	background-position: 5px 5px;
}
.inner {
	width: 150px;
	height: 50px;
	border: 5px solid brown;
	padding: 5px;
	margin: 10px;
}

Syndicate content