深入理解css中的margin属性（推荐）

时间：2017-04-09

另外一个有趣的例子就是：假设有一个元素同时设置了margin-top和margin-bottom，但是内容为空，那么这两个margin值也会叠加，值为两者最大的一个，它类似与竖直方向上两个盒子margin值的叠加。代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>水平方向的两个盒子</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

 

        .top{

            width: 500px;

            height: 100px;

            background: red;

        }

        .middle{

            margin-top: 100px;

            margin-bottom:50px;

        }

        .footer{

            width: 500px;

            height: 100px;

            background: green;

        }

 

    </style>

</head>

<body>

    <div class="top">上面的div,高100px</div>

    <div class="middle"></div>

    <div class="footer">下面的div，高100px</div>

</body>

</html>

最终的效果如下：

我们发现这时在上面的div和在下面的div之间的举例并不是100+50=150px，而是两者中的最大者，即100px。

那么W3C为什么会设定这样的标准而不设定和水平方向一样的标准呢？即margin值的叠加，实际上这也是有一定的道理的。比如我们需要设计一个由若干个段落构成的一个页面。我们需要设置margin-top和margin-bottom使得第一段和页面的最上方有一段距离，使得最后一段和最下方有一段距离。下面是不叠加和叠加的效果图：

我们可以看到左边的页面没有重叠，那么两个段落之间的举例就是最上方的两倍间距了，而右边的页面发生了重叠，则所有的间距都是相等的。或许这就是这样设定标准的目的吧，谁知道呢？

第三部分：margin--在父元素和子元素之间应用（重点）

第二部分介绍了同级元素之间使用margin，而这一部分将要介绍最有意思的父元素和子元素之间margin的应用。这一部分，我们同样从两个方面来讨论。一方面是子元素设置水平方向上的margin值，另一方面是子元素设置竖直方向的margin值。

（1）在子元素中设置水平方向的margin值

我们可以设置margin-left来控制子元素的左边框和父元素的左边框之间的举例。

例3：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin</title>

    <style>

        *{padding:0; margin:0; border:0;}

        .father{

            width: 500px;

            height: 500px;

            background: red;

        }

        .son{

            width: 100px;

            height: 100px;

            background: green;

            margin-left: 100px;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">宽度为100px，margin-left为100px。</div>

    </div>

</body>

</html>

我将子元素的margin-left设置为了100px;效果如下：

即子元素的左边框和父元素的左边框之间的距离为100px。与在同级元素之间设置margin不同，因为同级元素之间的margin不会考虑到padding,但是在父元素和子元素就不同了，那么如果父元素中如果有padding，效果会是什么样的呢？请看下面一个例子：

例4：

下面我们在上面例子的基础上给父元素添加padding值。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin</title>

    <style>

        *{padding:0; margin:0; border:0;}

        .father{

            width: 500px;

            height: 500px;

            padding:100px;

            background: red;

        }

        .son{

            width: 100px;

            height: 100px;

            background: green;

            margin-left: 100px;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">宽度为100px，margin-left为100px。</div>

    </div>

</body>

</html>

上面的代码给父元素添加了100px的padding值，效果如下：

我们可以看到子元素举例上方的距离为100px，因为子元素一定是在父元素的content的部分的，这点毫无疑问。

共5页:

2/5

上一篇：CSS3 Notes: -webkit-box-reflect实现倒影的实例 下一篇：CSS控制文字换行、裁剪

深入理解css中的margin属性（推荐）

相关文章

最新文章