margin重叠与line-height属性

时间：2016-09-06 12:09:48 阅读：196 评论：0 收藏：0 [点我收藏+]

标签：

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>

margin重叠与line-height属性

标签：

原文地址：http://www.cnblogs.com/yatao/p/5844942.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行