<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<p>この例では、h1要素の下余白は50px、h2要素の上余白は20pxです。したがって、h1とh2の間の垂直余白は70px(50px+20px)であるはずです。ただし、マージンの相殺により、実際の余白は 50pxになります。.</p>
<h1>見出し1</h1>
<h2>見出し2</h2>
</body>
</html>