<del id="qki2e"></del>

CSS之表格邊框合并、兄弟標簽外邊距合并、父子標簽的外邊距合并

_Dreams 發布于2019-04-23 13:46 / 2919人閱讀

摘要：本文內容表格邊框合并兄弟標簽外邊距合并父子標簽的外邊距合并首發日期表格邊框合并發生情況當設置了后，表格的相鄰邊框會合并，使得邊框變粗了。

本文內容：

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

首發日期：2018-05-01

表格邊框合并：

發生情況：

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

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

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

解決方案：

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

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

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

兄弟標簽外邊距合并：

發生情況：

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

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

?

解決方案：

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

父子標簽的外邊距合并：

發生情況：

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

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

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <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">123div>
    div>
body>
html>

解決方案：

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

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <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">123div>
    div>
body>
html>

云服務器 GPU云服務器 html 邊框外邊距邊距合并 html 的外邊距外邊距重疊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2312.html

CSS盒子模型以及外邊框合并的問題

摘要：盒子模型我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子所以布局的萬物基于盒子。雖然外邊距是不可見的，但是我們算元素的總寬度或者總高度的時候，要加上外邊距。盒子模型我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子......所以布局的萬物基于盒子。即使一個小小的元素p，也可以把它抽象成為一個盒子...

zacklee 2019-08-02 16:01 評論0 收藏0
CSS盒子模型以及外邊框合并的問題

摘要：盒子模型我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子所以布局的萬物基于盒子。雖然外邊距是不可見的，但是我們算元素的總寬度或者總高度的時候，要加上外邊距。盒子模型我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子......所以布局的萬物基于盒子。即使一個小小的元素p，也可以把它抽象成為一個盒子...

paulli3 2019-08-29 14:03 評論0 收藏0
挖掘margin屬性的內涵

摘要：合并問題塊級元素的上邊距和下邊距有時會合并或者折疊為一個外邊距捕獲到的重要信息只發生在塊級元素，但不包括浮動元素和絕對定位元素只發生在和當前文檔流方向的相垂直的方向上由于默認文檔流是水平流，因此發生合并的就是垂直方向會出現外邊距合并的三種基 1、margin合并問題塊級元素的上邊距和下邊距有時會合并或者折疊為一個外邊距捕獲到的重要信息只發生在塊級元素，但不包括浮動元素和絕對定位...

alanoddsoff 2019-08-29 15:29 評論0 收藏0
HTML、CSS筆記

摘要：相鄰的兄弟元素相鄰的兩個兄弟元素之間的外邊距會塌陷。塊級父元素與其第一個最后一個子元素如果塊級父元素中，上邊框寬度及上內邊距距離為時，此時這個塊級父元素和其第一個子元素就會發生上外邊距合并現象。盒模型在CSS中，使用標準盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內容。每個盒子有四個邊：外邊距邊, 邊框邊, 內填充邊與內容邊。在標準模式下，一個塊的總寬度=...

frank_fun 2019-08-01 18:29 評論0 收藏0
HTML、CSS筆記

摘要：相鄰的兄弟元素相鄰的兩個兄弟元素之間的外邊距會塌陷。塊級父元素與其第一個最后一個子元素如果塊級父元素中，上邊框寬度及上內邊距距離為時，此時這個塊級父元素和其第一個子元素就會發生上外邊距合并現象。盒模型在CSS中，使用標準盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內容。每個盒子有四個邊：外邊距邊, 邊框邊, 內填充邊與內容邊。在標準模式下，一個塊的總寬度=...

Aomine 2019-08-29 14:22 評論0 收藏0