One issue I'm encountering is that the margin isn't behaving as expected in this example. The padding seems to be working like margin should. Why is that?
Print Screen:
https://i.stack.imgur.com/N1ojF.png
Why is it that the margin in the h3 tag inside the div element is affecting the parent div instead of the h3 itself? And why is the padding acting like the margin should? It's quite perplexing... What's going on here?
Code:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Philosophia Blog</title>
<meta name="description" content="Blog about interesting publications in the field of philosophy. Discussion of selected texts from the most famous authors!">
<meta name="keywords" content="philosophy, books, blog, reflections">
<meta name="author" content="Mortinez Walles">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<style>
#aside {
width: 315px;
float: left;
min-height: 500px;
}
.abox {
margin: 10px;
margin-bottom: 20px;
max-width: 279px;
}
.abox1 {
height: auto;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
}
.abox1-content {
padding: 10px;
}
#photo {
width: 80px;
height:80px;
float: right;
background-image: url("zdj.png");
background-repeat: no-repeat;
margin: 10px;
border: 1px solid #000000;
box-shadow: 1px 1px 2px 0px #000000;
}
.abox2 {
height: 300px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
}
.abox h3 {
text-align: center;
margin: 0px;
margin-top: 70px;
}
.clear {
clear: both;
}
</style>
<aside>
<div id="aside">
<div class="abox1 abox">
<div class="abox1-content">
<div id="photo"></div>
Hi! I'm Michael. Thanks to earning money from my blog and sensible saving, I can afford a lot. I want to show you how to take care of your household budget, get out of debt, multiply savings, and secure a decent retirement for yourself.
</div>
<div class="more"><a href="#">More about me...</a></div>
</div>
<div class="abox1 abox">
<header>
<h3>Download Free Materials</h3>
</header>
<div class="abox1-content">
Over 67,000 people have already signed up for my newsletter (no spam! - just information about new articles). Sign up and you will receive a set of 23 Excel calculators that will help you calculate media costs, estimate credit installments, determine your net worth, check the profitability of online currency exchange offices, learn ways to categorize expenses, and much more!
</div>
</div>
<div class="abox1 abox">
</div>
</div>
</aside>
</body>
</html>