I'm reading through "HTML and CSS Design and Build Websites", one of the examples in Chapter 17 is this:
http://www.htmlandcssbook.com/code-samples/chapter-17/example.html
I'm following through the HTML/CSS in the book and it mostly makes sense. What I can't understand is a little nitpick though: using the developer tools from chrome and looking at "Contact" at the bottom right, the 10px margin-top value is shown as going outside the containing section block (of class="contact details"). Why is the top margin of the Contact heading not kept within the section block? Or rather, why is the section block not extended to keep all the content of the heading within? A minimal example:
<!DOCTYPE html>
<html>
<head>
<link href="example.css" type="text/css" rel="stylesheet" />
</head>
<body>
<aside>
<section class="contact-details">
<h2>Contact</h2>
</section>
</aside>
</body>
</html>
The CSS:
section, aside {
display: block;
}
aside {
width: 230px;
border: 1px solid green;
}
aside h2 {
border: 1px solid red;
color: #fe6582;
margin: 50px 0px 50px 0px;
}
I find that if I place a border around section then the problem is resolved (section contains all of the heading, including its margin). Is this a HTML trait or a problem with the developer tools of chrome?
