Top margin on <h2>

HTML & CSS
1

Hi all

I know this is going to be something really simple but i just can’t work it out.

I’m trying to apply margin on all side of a <h2> element. The margin works on left and right sides but not the top.

http://www.ttmt.org.uk/forum/2_margin/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css" media="screen">
    div{
      background:#cfdfe2;
      height:300px;
      margin:50px;
      width:400px;
    }
    div h2{
      background:gold;
      color:#fff;
      display:block;
      font-weight:bold;
      padding:5px;
      margin:10px;
    }
	</style>
</head>

<body>

  <div>
    <h2>heading</h2>
  </div>

</body>
</html>
2

This is an example of Collapsing margins. Give the holding container a padding or border property of 1 px and it is fixed:


div {
background:none repeat scroll 0 0 #CFDFE2;
height:300px;
margin:50px;
width:400px;
padding-top:1px;
}