使用padding:0;和margin:0;可以清除元素的内外边距，一般在编写css代码的开始位置会使用如下语法先清除所有元素内外边距，包括元素原生的内外边距：
- <div>*{</div><div>padding:0;</div><div>margin:0;</div><div>}</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内边距和外边距的清除以及清除标签原生的内外边距</title>
</head>
<style>
body{
/* 清除body的空白间距，即浏览器自带的边距，一般在写css前都是要写这一句的。 */
padding:0;
margin:0;
}
div{
width:200px;
height:200px;
background:#f00;
}
h1{
background:#f00;
padding:0;
margin:0;
}
p{
background:#f00;
padding:0;
margin:0;
}
ul{
background:#f00;
padding:0;
margin:0;
list-style:none;
}
li{
background:#0f0;
}
.box{
width:300px;
height:300px;
background:#f00;
text-align:center;/* 文字横向居中 */
}
.small{
width:100px;
height:100px;
background:#0f0;
margin:0 auto; /* 行内块元素横向居中 */
}
.s{}
</style>
<body>
<div class="box">
<div class="small">
文字
</div>
</div>
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
<p>段落</p>
<h1>飞来山上千寻塔</h1>飞来山上千寻塔，闻说鸡鸣见日升
<div>
闻说鸡鸣见日升
</div>
</body>
</html>
显示结果如下：
可以看到，所有元素都紧贴浏览器边界，以为我们已经取消了浏览器和所有元素的内外边距，这样更容易排版而且排版后的页面更美观。
|
窥视卡
雷达卡
发表于 2023-2-1 10:18:10
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-17 18:13:24
