<!DOCTYPE html>
<html>
<head>
<title>3.7 CSS: Margins</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Part A: top margin of 5px, right margin of 10px, bottom margin of 15px, and a left margin of 20px-->
<div class="box1">
<h1> BOX 1 </h1>
</div>
<!-- Part B: top margin of 10px, right margin of 5px, bottom margin of 20px, and a left margin of 17px-->
<div class="box2">
<h1> BOX 2 </h1>
</div>
<div class="box3">
<h1> BOX 3 </h1>
</div>
<div class="box4">
<h1> BOX 4 </h1>
</div>
</body>
<!-- Do not remove following lines. They're used to test. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://sites.webjam.org/grader/assignment3.7.js"></script>
</html>
.box1 {
border: solid black;
}
.box2 {
border: solid red;
}
.box3 {
border: solid green;
}
.box4 {
border: solid blue;
}