CSS核心(二十九)内边距和外边距的清除以及清除标签原生的内外边距
使用padding:0;和margin:0;可以清除元素的内外边距,一般在编写css代码的开始位置会使用如下语法先清除所有元素内外边距,包括元素原生的内外边距:<div>*{</div><div>padding:0;</div><div>margin:0;</div><div>}</div>以下代码中为了方便说明哪些元素原生自带边距,所以单独设置了padding:0;和margin:0
<!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>
显示结果如下:
可以看到,所有元素都紧贴浏览器边界,以为我们已经取消了浏览器和所有元素的内外边距,这样更容易排版而且排版后的页面更美观。
学海无涯!生命不息,学习不止! 学习的道路上永远都没有终点!!! good good studyday day up 恩,很好。值得提倡。兄弟。有你的。你现在一个月的工资有多少呀??你现在的工作都做些什么呀? 三人行,必有我师 ding 受益非浅 好意!肯请楼主带主角去测测智商,情商为0就不用了! 虽然不知道我已经是第几个回贴的人了,但是看了这篇我还不太懂的文章后我仍然深有感触,如果真想你说的那样的话,对我这个大一的初学者来说是一种莫大的帮助,我非但不会放弃编程,这使得我更有动力,我一定会按照大家说的并结合自己的方法,搞好编程.