《css秘籍》-第七章-上（margin、padding）_html/css

《css秘籍》-第七章-上（margin、padding）_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 09:00:15

原创

1493人浏览过

padding是指与其边框线之间的空间
border是指盒子周边的直线
background-color是用来填充边框内部空间的
margin是指一个标签和另外一个标签之间的间隔。

默认是这样的，但是由于不同的浏览器会给相同的标签提供不同的padding和margin，因此最好将所有标签的padding和margin都置零

用margin和padding控制空间

padding是在内容和边框之间增加空间，padding占用的空间也可以为空白内容，但他仍然会填满背景色或者图片，margin则是在元素之间增加空白，所有有时候看到增加margin之后，会多了空白的沟槽。

margin可以用百分比进行布置，例如

< !DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"/>    <title></title>    <style>        .test1{            margin-left: 20%;            margin-right: 20%;            width: 500px;            height: 500px;            border: solid;        }    </style></head><body><div class="test1"></div></body></html>

登录后复制

假设这个div就是在html的body的一个div，这样的话这个div会始终保持增加距离浏览器左边%20的间距和距离浏览器右边%20的间距。这种做法很适合在做一些适配浏览器尺寸的操作。