css margin使用技巧

margin使用技巧：

（1）设置元素水平居中：margin:x auto;

（2）margin负值让元素位移及边框合并

水平居中：auto

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin:0px;
        }

        .box{
            width:600px;
            height:100px;
            border:1px solid black;
            margin:100px auto 0;
            /*background-color:gold;*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

负值：元素位移及边框合并

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin:0;
        }

        .box{
            width:202px;
            height:156px;
            background-color:gold;
            margin:50px auto 0;
        }

        .box div{
            width:200px;
            height:30px;
            border:1px solid green;
            background-color:gold;
            margin-top:-1px;  /* 方法二 */
            /*border-bottom:0px;*/
        }
        /* 方法一：
        .box .last{
            border-bottom:1px solid green;
        }
        */
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="last"></div>
    </div>
</body>
</html>

页面显示效果：

外边距合并：

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，解决方法如下：

（1）使用这种特性

（2）设置一边的外边距，一般设置margin-top （实际开发中常用）

（3）将元素浮动或者定位

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直边距合并</title>
    <style type="text/css">
        .box{
            width:500px;
            border:1px solid black;
            margin:50px auto 0;
        }

        .box div{
            margin:20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
            合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
        <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
            合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
        <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
            合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
        <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
            合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
    </div>
</body>
</html>

页面显示效果：

margin使用技巧：

水平居中：auto

猜你喜欢