css margin使用技巧

時間 2019-11-24

標籤 css margin 使用技巧欄目 CSS 简体版

原文原文鏈接

margin使用技巧：

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

（2）margin負值讓元素位移及邊框合併html

水平居中：auto

代碼：spa

<!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>

負值：元素位移及邊框合併 3d

代碼：code

<!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>

頁面顯示效果：xml

外邊距合併：htm

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者，解決方法以下：blog

（1）使用這種特性ci

（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>