1.padding
padding 内填充
注意：设置padding后会撑大容器的大小
padding的四个方向
top right bottom left
paading复合写法 : top right bottom left
只有一个属性值时: 4个方向都是同一个值
设置两个属性值时：
第一个属性值设置的是上下两个方向，
第二个属性值设置的是左右两个方向。
设置三个属性值时：
第一个属性值设置的是上边一个方向，
第二个属性值设置的是左右两个方向，
第三个属性值设置的是下边一个方向。
设置四个属性值时：
第一个属性值设置的是上边一个方向，
第二个属性值设置的是右一个方向，
第三个属性值设置的是下边一个方向，
第四个属性值设置的是左边一个方向。
2.margin
下面这个例子可以说明这个问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
background-color: red;
border: 1px solid black;//解决
}
#div1{
height: 50px;
background-color: pink;
margin: 100px 100px 200px 100px;
}
#div2{
height: 50px;
background-color: yellow;
margin: 100px;
}
</style>
<!--
margin的问题
1、margin-top传递
解决方法：仅用以学知识点可以使用border解决
2、margin上下叠压
解决技巧：
1、还是使用margin，可以将某一个元素方向设置成预想的值。margin叠压会取最大的margin值.
2、如果元素没有特殊特征，也可以用padding代替
-->
</head>
<body>
<div id="box">
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>
</body>
</html>
688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
