示例代码
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<style>
#box1{
width: 600px;
height: 150px;
border:50px ;
background: red;
padding-left: 50px;
}
#box2{
width: 300px;
height: 100px;
background: yellow ;
}
</style>
<title>test</title>
</head>
<body >
<div id="box1" >
<div id="box2">
</div>
</div>
</body>padding ：内边距，列如 padding-left: 50px; 这句话的效果是在原来的基础上添加50像素
以下实例 所以添加后要注意调整长宽，其他方向相同
没用padding-left：50px之前是
使用之后：
margin：外边距要注意的是父子级包含的时候margin-top会传递给父级
margin-top:50px 是应用在box2上的却传递到了父级容器，以下效果：
这样的情况下可以在父级盒子中使用padding来实现效果
#box{
width: 600px;
height: 100px;
border:50px ;
background: red;
padding-top: 50px;
} 
扫一扫
854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
