margin

Alan 發布于2019-08-01 15:54 / 823人閱讀

摘要：二負一個沒有設定高度的塊狀元素，其高度是自動的，具體來說就是由它里面的文檔流最后的位置決定的。為負值，會導致元素的邊界收縮，其作用只會影響文檔流的邊界。而文檔流邊界的減少，會產生以下兩個影響。

一、margin移動的參考基線

上圖解析：

box 的實際大小 = box 的物理大小 + 正的 margin(物理大小指的是除去 margin，也就是包含 border 以內的 box 大小)

如果是負的 top 或 left 值會引起 box 的向上或向左位置移動，如果是負的 bottom 或 right 會影響下面 box 的顯示的參考線。

二、負margin-bottom

一個沒有設定高度的塊狀元素，其高度是自動的，具體來說就是由它里面的文檔流最后的位置決定的。

margin-bottom為負值，會導致元素的邊界收縮，其作用只會影響文檔流的邊界。而文檔流邊界的減少，會產生以下兩個影響。
1、后面的元素會占據收縮產生的那一部分文檔流，從而形成后面元素覆蓋前面元素的效果
2、當父元素沒有明確指定height，會導致父元素的邊界會往上面縮，也就是其父元素的邊界在子元素邊界上面。

總之：margin-bottom為負值只會影響父元素的高度(前提是父元素沒有明確指定height)，無法影響子元素自身的高度!

三、負margin-right

margin-right為負數只會改變元素自身的寬度（前提是父元素尺寸固定，子元素寬度未設），不會修改父元素的寬度。margin-left為負數在該條件下也會改變元素自身的寬度。

為什么負margin-right/margin-left會改變元素寬度？因為假如P為block元素且沒有指定width，則p的width+padding+border+margin=父級div的width（這里都是說的水平方向）。

這里假定padding,border為0。父級div width為400px。p的width為inherit。不設置margin，則p的width為400px。
當margin-left:-100px;，p.width + (-100px) = 400px。因此, p的width就變成了500px。

這里說的p都是假定為inherit width。如果指定了p的width，則margin-left,margin-top為負值會引起p元素位置的變化。

四、負margin的應用 多列等高布局（原理：負margin-bottom）

body,
p {
    margin: 0;
    padding: 0;
}

#testdiv {
    overflow: hidden;
    width: 660px;
    margin: 0 auto;
}

#left,
#center,
#right {
    margin-bottom: -400px;
    padding-bottom: 400px;
}

#left {
    float: left;
    width: 180px;
    background: #777;
}

#center {
    float: left;
    width: 300px;
    background: #888;
}

#right {
    float: right;
    width: 180px;
    background: #999;
}

p {
    color: #FFF;
    text-align: center
}


    
        style="height:50px"
    
    
        style="height:100px"
    
    
        style="height:200px"

未設置padding-bottom和 margin-bottom屬性時，高度不一，外層DIV高度為內層最高DIV高度。

設置padding-bottom和 margin-bottom屬性，未設置testdiv的overflow屬性時，外層DIV高度仍為200，內層各div邊界在外層div邊界之下。

設置testdiv的overflow屬性后，外層div以內層最高div的高度200為自身的高度，各列不足200高度的，則用padding不足。

去除列表右邊距（原理：負margin-right/margin-left）

可實現中間帶些間隔的布局。

ul,
li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.container {
    height: 210px;
    width: 490px;
    border: 5px solid #000;
    overflow: hidden;/*將超出部分內容隱藏*/
}

ul {
    height: 210px;
    background-color: red;
    margin-right: -30px;
    /*一個負的margin-right,相當于把ul的寬度向右增加了30px*/
}
   
li {
    height: 100px;
    width: 100px;
    background: #eee;
    float: left;
    margin-right: 30px;
}

    
        子元素1
        子元素2
        子元素3
        子元素4

ul不加 margin-right: -30px;，則一行放不下

ul加上 margin-right: -30px;，則會導致超出父元素

因此需要為父元素添加overflow: hidden;

五、margin折疊 折疊含義

兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會折疊

1、兩個或多個

說明其數量必須是大于一個，又說明，折疊是元素與元素間相互的行為，不存在 A 和 B 折疊，B 沒有和 A 折疊的現象。

2、毗鄰

是指沒有被非空內容、padding、border 或 clear 分隔開，說明其位置關系。

注意一點，在沒有被分隔開的情況下，父元素的 margin-top 會和它普通流中的第一個子元素(非浮動元素等)的 margin-top 相鄰；只有父元素的 height 是 "auto" 的情況下，它的 margin-bottom 才會和它普通流中的最后一個子元素(非浮動元素等)的 margin-bottom 相鄰。

3.垂直方向

是指具體的方位，只有垂直方向的 margin 才會折疊，也就是說，水平方向的 margin 不會發生折疊的現象。

發生折疊的情況

1、相鄰的兄弟元素

上一個元素的margin-bottom與下一個元素的margin-top重疊。

2、父級和第一個/最后一個子元素

父元素的margin-top與子元素的margin-top，或父元素的margin-bottom與子元素的margin-bottom重疊。

3、空的block元素

自己的margin-top和margin-bottom重疊（自身內容為空，垂直方向上 border、padding 為 0發生）

如何使元素上下margin不折疊

1、使元素脫離普通流

浮動元素、inline-block 元素、absolute和fixed定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊。（這里指的是上下相鄰的元素）

創建了塊級格式化上下文的元素，不和它的子元素發生 margin 折疊。可通過以下幾種觸發BFC:float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline-block）、position（除了static/relative）

2、使元素不毗鄰

添加border或padding或line boxs

margin重疊的計算規則

1、正正取大值（都為正，則取最大的正值）
2、正負值相加（一正一負，則取兩者相加后的值）
3、負負最負值（都為負，則取絕對值大的負值）
參考自：
由淺入深漫談margin屬性
深入理解margin重疊以及負margin對元素大小的影響
collapsing-margin的W3C官方介紹

云服務器 GPU云服務器 margin: margins margin margin縮寫

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

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

細說 CSS margin

摘要：給父元素設置了一個灰色背景，并且沒有設置高度，因此高度會隨著內容而擴展，設置為。這個元素的位置如下圖所示因為元素清除了左浮動，所以元素下移。由于這條規則的存在，導致他們折疊后的不能跟的進行折疊，因此的高度被撐開。作者：https://coding.net/u/zhengkenghong原文：https://blog.coding.net/blog/css-margin 本文著重描述關...

tianren124 2019-08-30 12:48 評論0 收藏0
你有所不知的margin屬性

摘要：前言致謝本文總結于張鑫旭老師的深入理解之課程，感謝張老師的辛苦付出難學的作為前端狗的我們，每天都要和網頁打交道。頁面中任何地方，嵌套或直接放入任何空的，都不會影響原來的布局。比如，給元素聲明，但在中的屬性是。前言致謝　本文總結于張鑫旭老師的 CSS深入理解之margin課程，感謝張老師的辛苦付出！難學的 CSS 　作為前端狗的我們，每天都要和網頁打交道。當 UI 將設計稿發給...

joywek 2019-08-30 14:01 評論0 收藏0
margin詳解

摘要：屬性指定了盒的區的寬度。簡寫屬性一次性設置四周的，而其它屬性只設置它們各側的。 margin屬性指定了盒的margin區的寬度。margin簡寫屬性一次性設置四周的margin，而其它margin屬性只設置它們各側的。這些屬性適用于所有元素，但非替換行內元素上的豎直margin將不會產生任何效果 margin與容器尺寸 margin與可視尺寸 margin與可視尺寸只適用于沒有設定...

stonezhu 2019-08-29 12:25 評論0 收藏0
關于css margin，你需要知道的一切

摘要：前兩個元素之間的是，因為較小的頂部與較大的底部相結合。這是由于兩個重疊造成的。同樣，這種行為也有一定的邏輯。這意味著在使用百分比時，元素周圍的大小都是相同的。為了保證的可讀性，本文采用意譯而非直譯。當我們學習CSS時，我們大多數人學到的第一件事是CSS中盒子的各個部分的細節，這部分通過叫做 CSS盒、模型。盒模型中的元素之一是margin，即盒子周圍的透明區域，它會將其他元素從盒子...

FreeZinG 2019-08-30 15:44 評論0 收藏0
關于css margin，你需要知道的一切

摘要：前兩個元素之間的是，因為較小的頂部與較大的底部相結合。這是由于兩個重疊造成的。同樣，這種行為也有一定的邏輯。這意味著在使用百分比時，元素周圍的大小都是相同的。為了保證的可讀性，本文采用意譯而非直譯。當我們學習CSS時，我們大多數人學到的第一件事是CSS中盒子的各個部分的細節，這部分通過叫做 CSS盒、模型。盒模型中的元素之一是margin，即盒子周圍的透明區域，它會將其他元素從盒子...

libxd 2019-08-26 10:28 評論0 收藏0
selenium中BasicAuth認證彈框處理

　小編寫這篇文章的主要目的，是給大家做一個介紹，介紹關于在python selenium中，如果出現了BasicAuth認證彈框，那么，我們后續應該要怎么進場處理呢？下面就給大家詳細解答下。　　一、什么是BasicAuth　　兩個不認識的見面：　　假如說張三和李四見面了，于是張三向李四發出了誠摯的邀請：李四，國慶來上海玩吧，我請你吃小龍蝦！本來李四想先視頻一下到時候好認人，但張三說那樣就沒有驚喜感...

89542767 2022-10-11 13:53 評論0 收藏0