一.padding--内边距
1.padding和margin属性值上差别在于没有auto选项,二者都有单边赋值xx-top|right|bottom|left。
2.padding是有颜色的,background-color将填充所有border以内的区域
3.如果是两个值,则第一个值表示上下、第二个表示左右;
如果是三个值,则第一个表示上,第二个是左右,第三个是下;
如果是四个值,按顺时针赋值
4.一般不设置宽,用padding撑开盒子,更适合开发。注意0PX也是有意义的
二、padding不额外撑开盒子的情况
大div盒子包一个小div盒子,因为宽度不给予的情况下,默认和父亲一样宽,所以在只设高度的情况下,添加padding/border,只撑开了高,没有撑开宽度。但如果padding值超过了父亲宽度,则依旧会超过父盒子。所以通栏的盒子一般不写宽度
<style>
.box{
width:200px;
height:200px;
background-color:pink;
}
.box1{
background-color:red;
padding:10px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
三.清除默认padding
<!--一些元素,默认带有padding-->
<style>
* {
margin: 0;
padding: 0;
}
</style>