内外边距的注意点

来源：互联网发布：json接口api 编辑：程序博客网时间：2024/05/21 18:48

示例代码

<!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;    }

0 0