<h2>The main content <code>div</code> is not nested here.</h2>
<div class="container-box">
This text is directly inside the parent <code>div</code> element.
<p>This is the first paragraph of our container.</p>
<p>The second paragraph contains a link to <a href="http://en.wikipedia.org/">WikiPedia</a>, the free encyclopedia.</p>
<p>I have also included a link to SitePoint as a direct child of the containing <code>div</code> element.</p>
<a href="https://www.sitepoint.com/">A Link to SitePoint.</a>
</div>
<h2>The main content <code>div</code> is nested inside another <code>div</code>.</h2>
<div>
<div class="container-box">
This text is directly inside the parent <code>div</code> element.
<p>This is the first paragraph of our container.</p>
<p>The second paragraph contains a link to <a href="http://en.wikipedia.org/">WikiPedia</a>, the free encyclopedia.</p>
<p>I have also included a link to SitePoint as a direct child of the containing <code>div</code> element.</p>
<a href="https://www.sitepoint.com/">A Link to SitePoint.</a>
</div>
</div>
body {
font-family: 'Lato';
margin: 50px 20px;
}
.container-box {
border: 1px solid black;
padding: 10px;
background: wheat;
}
html {
font-size: 62.5%;
}
div {
margin-bottom: 80px;
}
div {
font-size: 2rem;
}
code {
font-size: 0.9em;
}
p, a {
font-size: 1em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.