我很难理解为什么margin: 1rem不应用于我的页脚元素.修改大小时，仅修改article div和aside元素<p>中的文本内容.footer文本与顶部和底部的背景色之间没有边距，仅在左侧和右侧.有人能告诉我是什么原因吗？谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body {
background-color: pink;
}
section {
background-color: lightgray;
max-width: 1000px;
box-sizing: border-box;
}
.article {
background-color: lightyellow;
width: 70%;
float: left;
margin: 0;
}
aside {
background-color: lightgreen;
float: right;
float: none;
overflow: hidden;
margin: 0;
}
footer {
clear: both;
background-color: aqua;
display: block;
border: black 10px;
box-sizing: border-box;
}
p {
margin: 1rem;
}
</style>
</head>
<body>
<section>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac
eleifend ex, vitae bibendum tortor. Sed rutrum, orci quis venenatis
congue, justo orci volutpat justo, semper vestibulum mauris est mattis
mi. Duis tincidunt enim congue elit egestas, ut ultrices purus
vulputate. Curabitur gravida tellus vel ornare convallis. Nunc
</p>
</div>
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor
aliquam massa. Pellentesque maximus tortor ac est ultricies, id
sodales ligula vehicula. Fusce dignissim risus ligula, a feugiat augue
</p>
</aside>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
malesuada dolor quis ante tempus, eget posuere massa egestas. Integer
feugiat tellus nibh. Vestibulum pellentesque quam eu hendrerit porta.
Suspendisse sagittis eros vitae urna convallis, sit amet venenati
</p>
</footer>
</section>
</body>
</html>