人亦已歌 发表于 2023-2-1 10:18:10

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>



显示结果如下:



可以看到,所有元素都紧贴浏览器边界,以为我们已经取消了浏览器和所有元素的内外边距,这样更容易排版而且排版后的页面更美观。



IPA 发表于 2023-2-17 18:13:24

学海无涯!生命不息,学习不止!   

qqqwh89713 发表于 2023-2-24 06:21:50

学习的道路上永远都没有终点!!!

leasor 发表于 2023-2-28 12:53:43

good good studyday day up

狗蛋 发表于 2023-3-6 06:28:46

恩,很好。值得提倡。兄弟。有你的。你现在一个月的工资有多少呀??你现在的工作都做些什么呀?

handsomewill 发表于 2023-3-12 10:29:23

三人行,必有我师

殷茶叶蛋 发表于 2023-3-19 06:38:24

ding

leitiannu 发表于 2023-3-24 16:26:58

受益非浅

无间漂流者 发表于 2023-3-28 18:08:42

好意!肯请楼主带主角去测测智商,情商为0就不用了!

sunkeza 发表于 2023-3-31 20:52:45

虽然不知道我已经是第几个回贴的人了,但是看了这篇我还不太懂的文章后我仍然深有感触,如果真想你说的那样的话,对我这个大一的初学者来说是一种莫大的帮助,我非但不会放弃编程,这使得我更有动力,我一定会按照大家说的并结合自己的方法,搞好编程.
页: [1] 2 3 4
查看完整版本: CSS核心(二十九)内边距和外边距的清除以及清除标签原生的内外边距