本文內容：

表格邊框合並
兄弟標簽外邊距合並
父子標簽的外邊距合並

首發日期：2018-05-01

表格邊框合並：

發生情況：

當設置了cellpadding="0" cellspacing="0"后，表格的相鄰邊框會合並，使得邊框變粗了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
    table{
        border:1px solid red;
    }
    td{
        border:1px solid red;
    }

    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
</body>
</html>

解決方案：

在table標簽中設置border-collapse:collapse 【border-collapse是邊框合並的意思。】

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
    table{
        border:1px solid red;
        border-collapse:collapse;
    }
    td{
        border:1px solid red;
    }

    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
</body>
</html>

兄弟標簽外邊距合並：

發生情況：

當上下兩個相鄰的標簽都設置了外邊距時，那么他們之間的間距不是外邊距之和，而是其中最大的外邊距。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        div:first-child{
            margin-bottom:15px;
            background-color: orange;
        }
        div:last-child{
            margin-top:35px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>123</div>
    <div>123</div>
</body>
</html>

解決方案：

沒方法解決，理論上應該僅僅設置一邊的邊距。最好的解決方法就是避免。

父子標簽的外邊距合並：

發生情況：

想使子標簽對父標簽有一個外邊距，但發生了外邊距合並，子標簽的外邊距沒有作用到父標簽，反而合並到父標簽對於其他標簽的外邊距中（誰大采用誰）。

如果父標簽沒有設置上內邊距以及邊框，則父標簽和子標簽的上外邊距會合並，合並之后的外邊距為兩者之和。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        #father{
            margin-top:100px;
            background-color: blue;
        }
        #son{
            margin-top:200px; /* 最終外邊距為200px */
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son">123</div>
    </div>
</body>
</html>

解決方案：

給父元素定義上邊框或上內邊距
給父元素添加overflow:hidden

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        #father{
            margin-top:100px;
            background-color: blue;
            /* border:1px solid red;  方法一 */
            /* padding-top:1px;  第二種方法*/
            overflow:hidden;  /*  方法三 */
        }
        #son{
            margin-top:200px;

            background-color: green;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son">123</div>
    </div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS外邊距合並 CSS外邊距合並問題 css外邊距合並問題(外邊距塌陷) CSS外邊距合並的幾種情況 CSS外邊距合並（塌陷/margin越界） margin外邊距合並問題以及解決方式關於外邊距合並問題及解決方案解決垂直外邊距合並的幾種辦法 HTML 學習筆記 CSS樣式（外邊框外邊框合並）深入理解BFC和外邊距合並(Margin Collapse)