当我们做一个页面时，默认页面元素距页面左右上下都有一个很小的间隙。如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角形</title>
</head>
<style>
.three{
width: 100px;
height: 100px;
border-style: solid;
border-width: 1px;
}
</style>
<body>
<div class="three">
</div>
</body>
</html>
效果如下图所示：
这是由于盒子模型中，默认的body与整个页面间的外边距不为0，将body的margin设置为0px即可消除该间隙。如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角形</title>
</head>
<style>
.three{
width: 100px;
height: 100px;
border-style: solid;
border-width: 1px;
}
body{
margin: 0px;
}
</style>
<body>
<div class="three">
</div>
</body>
</html>
效果如下图所示：
时间： 2024-10-12 16:18:22