line-height
line-height代表行高
蓝色背景部分为行高
line-height：2em
相邻兄弟元素margin重叠
蓝色与蓝色之间的白色部分为
margin-bottom：1em；
margin-top：1em；
因为发生了margin-top与margin-bottom重叠
所以只有1em的留白
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&&/title&
&style type="text/css"&
line-height: 2em;
margin: 1em 0;
background: lightseagreen;
&p&第一行&/p&
&p&第二行&/p&
父类元素与子元素margin重叠 & &
父类元素没有设置border-top值
父类元素没有设置padding-top值
子元素设置margin-top等于20px
父类元素设置margin-top等于20px
父类元素与子元素同时设置margin-top等于20px，&
此时父类元素的margin-top与子元素margin-top发生重叠
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&&/title&
&style type="text/css"&
background: lightblue;
background: lightcoral;
margin-top:20px;
margin-top:20px;//上外边距等于20px
&div id="father"&
&div id="son"&
my name is son
当第一行的margin-bottom等于50px，
第二行的margin-top等于30px，
这时它们两个之间的间距取较大值50px
当一个值为正数，一个为负值时，
间距取它们两个值的和
当两个值都为负值，取它们其中绝对值较大的负值。
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&&/title&
&style type="text/css"&
margin-bottom: 50px;
background: lightblue;
margin-top: 30px;
background: lightcoral;
&p class="first"&第一行&/p&
&p class="second"&第二行&/p&
阅读(...) 评论()