开发者学堂课程【CSS 快速掌握：善于使用父元素的 padding 而不使用子元素的 margin 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9196
善于使用父元素的padding而不使用子元素的 margin
内容介绍
一、 两种方法
一、 两种方法
根据例题探究善于使用父元素的 padding 而不使用子元素的 margin 的两种方法
例题
margin</span></code><code><span class="lake-fontsize-1515" style="color: #000000;">需求<span>
*{
margin : 0;
padding:0;
}
.box{
width : 300px;
height: 500px;
background-color: #0f0;
}
.content{
width: 100px;
height: 100px;
background-color: #f00;
/*设置上外边距10px*/
margin-top: 100px;
}
解决以上的问题:
第一种方法:给其父元素设置一个边框线·
margin</span></code><code><span class="lake-fontsize-1515" style="color: #000000;">需求<span>
*{
margin : 0;
padding:0;
}
.box{
width : 300px;
height: 500px;background-color: #0f0;
border: 1px solid #f00;
}
content{
width: 100px;
height: 100px;
background-color: #f00;
/*设置上外边距10px*/
margin-top: 100px;
}
这种方法不常用，边框一般是用于来调试代码
很少给一个盒子设置边框。
第二种方法:不要使用子元素的 margin 而是要使用其父元素的 paddinge
*{
margin:0
padding:0 ;
}
.box{
width: 300px;
height: 500px;
background-color: #0f0;
/* border:1px solid #f00; */
padding-top: 100px ;
}
.content{
width: 100px;
height: 100px;
background-color: #f00 ;
/*设置上外边距100px*/
/* margin-top: 100px; */
}
margin 属性本意用于来描述兄弟与兄弟元素之间的关系不是用于描述父子元素之间的关系。
描述父子元素的关系最好使用给其父元素设置 padding 属性。
