margin重叠与line-height属性

最新推荐文章于 2023-11-13 15:38:38 发布

weixin_33857230

最新推荐文章于 2023-11-13 15:38:38 发布

阅读量172

点赞数

原文链接：http://www.cnblogs.com/yatao/p/5844942.html

版权

line-height

line-height代表行高

蓝色背景部分为行高

line-height：2em

相邻兄弟元素margin重叠

蓝色与蓝色之间的白色部分为

margin-bottom：1em；

margin-top：1em；

因为发生了margin-top与margin-bottom重叠

所以只有1em的留白

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
            p{
                  line-height: 2em;
                  margin: 1em 0;
                  background: lightseagreen;
            }

            </style>
      </head>
      <body>
            <p>第一行</p>
            <p>第二行</p>
      </body>
</html>

父类元素与子元素margin重叠

条件

父类元素没有设置border-top值
父类元素没有设置padding-top值

子元素设置margin-top等于20px

父类元素设置margin-top等于20px

父类元素与子元素同时设置margin-top等于20px，

此时父类元素的margin-top与子元素margin-top发生重叠

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
            body{
                  background: lightblue;
            }
            #father{
                  background: lightcoral;
                  margin-top:20px;
            }
            #son{
                  margin-top:20px;//上外边距等于20px
            }
            </style>
      </head>
      <body>
            <div id="father">
                  <div id="son">
                        my name is son
                  </div>
            </div>
      </body>
</html>

当第一行的margin-bottom等于50px，

第二行的margin-top等于30px，

这时它们两个之间的间距取较大值50px

当一个值为正数，一个为负值时，

间距取它们两个值的和

当两个值都为负值，取它们其中绝对值较大的负值。

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
            .first{
                  margin-bottom: 50px;
                  background: lightblue;
            }
            .second{
                  margin-top: 30px;
                  background: lightcoral;
            }
            </style>
      </head>
      <body>
            <p class="first">第一行</p>
            <p class="second">第二行</p>
      </body>
</html>

转载于:https://www.cnblogs.com/yatao/p/5844942.html

weixin_33857230

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
margin重叠与line-height属性

line-heightline-height代表行高蓝色背景部分为行高line-height：2em相邻兄弟元素margin重叠蓝色与蓝色之间的白色部分为margin-bottom：1em；margin-top：1em；因为发生了margin-top与margin-bottom重叠所以只有1em的留白<!DOCTYPE html>...
复制链接

扫一扫