大家好捺僻，我是IT修真院深圳分院第01期學(xué)員浆劲，一枚正直善良的web程序員兵罢。

今天給大家分享一下，修真院官網(wǎng) CSS任務(wù)中可能會(huì)使用到的知識(shí)點(diǎn)：

什么時(shí)候用padding什么時(shí)候用margin?

1.背景介紹

什么是margin 什么是padding

我們?cè)谶M(jìn)行網(wǎng)頁制作時(shí)都會(huì)遇到為元素設(shè)定邊距的情況，邊距又分為內(nèi)邊距和外邊距与帆，即margin和padding.

margin和padding是在html中的盒模型的基礎(chǔ)上出現(xiàn)的了赌，

margin是盒子的外邊距，即盒子與盒子之間的距離玄糟，而padding是內(nèi)邊距勿她，是盒子的邊與盒子內(nèi)部元素的距離。

2.知識(shí)剖析

margin是什么茶凳？

CSS 邊距屬性定義元素周圍的空間嫂拴。通過使用單獨(dú)的屬性，可以對(duì)上贮喧、右、下猪狈、左的外邊距進(jìn)行設(shè)置箱沦。也可以使用簡寫的外邊距屬性同時(shí)改變所有的外邊距」兔恚——W3School

邊界谓形，元素周圍生成額外的空白區(qū)〗埃“空白區(qū)”通常是指其他元素不能出現(xiàn)且父元素背景可見的區(qū)域寒跳。——CSS權(quán)威指南

padding是什么竹椒？

padding 屬性設(shè)置元素的內(nèi)邊距,屬性定義元素邊框與元素內(nèi)容之間的空間童太。

同理padding可以稱之為“內(nèi)邊距”，但是我又恰恰喜歡稱呼padding為“補(bǔ)白”或者“留白”

Margin的特性

margin始終是透明的胸完。margin通過使用單獨(dú)的屬性书释，可以對(duì)上、右赊窥、下爆惧、左的外邊距進(jìn)行設(shè)置。即：margin-top锨能、margin-right扯再、margin-bottom、margin-left址遇。

margin只有一個(gè)值表示上右下左熄阻，如果 margin 只有兩個(gè)值第一個(gè)值表示上下，第二個(gè)值為左右傲隶。

margin有三個(gè)值 表示上左右下饺律，margin有四個(gè)值表示上下左右四個(gè)方向。

padding的特性

padding屬性設(shè)置元素所有內(nèi)邊距的寬度，或者設(shè)置各邊上內(nèi)邊距的寬度复濒。行內(nèi)非替換元素上設(shè)置的內(nèi)邊距不會(huì)影響行高計(jì)算脖卖；因此，如果一個(gè)元素既有內(nèi)邊距又有背景巧颈，

從視覺上看可能會(huì)延伸到其他行畦木，有可能還會(huì)與其他內(nèi)容重疊。元素的背景會(huì)延伸穿過內(nèi)邊距砸泛。不允許指定負(fù)邊距值十籍。

3.常見問題

1.什么是盒子模型。

2.margin和padding的區(qū)別唇礁。

3.用margin好還是用padding好勾栗。

4.解決方案

什么是盒子模型。

具備內(nèi)容盏筐、填充围俘、邊框、邊界這些屬性琢融，能包含其他元素的容器都是盒子界牡。

margin和padding的區(qū)別。

我們以DIV為一個(gè)盒子為例漾抬，既然和現(xiàn)實(shí)生活中的盒子一樣宿亡，那我們想一下，生活中的盒子內(nèi)部是不是空的好用來存放東西纳令，而里面存放東西的區(qū)域我們給他起個(gè)名字叫“content(內(nèi)容)”挽荠，而盒子的紙壁給他起個(gè)名字叫“border(邊框)”，如果盒子內(nèi)部的東西比如是一塊硬盤泊碑，但是硬盤怕震動(dòng)坤按，所以我們需要在硬盤的四周盒子的內(nèi)部均勻填充一些防震材料，這時(shí)硬盤和盒子的邊框就有了一定的距離了馒过，我們稱這部分距離叫“padding(內(nèi)邊距)”臭脓，如果我們需要購買許多塊硬盤，還是因?yàn)橛脖P怕震動(dòng)所以需要在盒子和盒子之間也需要一些防震材料來填充腹忽，那么盒子和盒子之間的距離我們稱之為"margin(外邊距)"

用margin好還是用padding好

何時(shí)應(yīng)當(dāng)使用margin：

需要在border外側(cè)添加空白時(shí)来累。

空白處不需要背景（色）時(shí)。

上下相連的兩個(gè)盒子之間的空白窘奏，需要相互抵消時(shí)嘹锁。如15px + 20px的margin，將得到20px的空白着裹。

何時(shí)應(yīng)當(dāng)時(shí)用padding：

需要在border內(nèi)測添加空白時(shí)领猾。

空白處需要背景（色）時(shí)。

上下相連的兩個(gè)盒子之間的空白，希望等于兩者之和時(shí)摔竿。如15px + 20px的padding面粮，將得到35px的空白。

margin在塊級(jí)元素

margin在塊級(jí)元素下继低，他的性能可以完全體現(xiàn)熬苍，上下左右任你設(shè)定.

margin在行級(jí)元素

margin也能用于內(nèi)聯(lián)元素，這是規(guī)范所允許的袁翁，但是margin-top和margin-bottom對(duì)內(nèi)聯(lián)元素（對(duì)行）的高度沒有影響柴底，并且由于邊界效果(margin效果)是透明的，他也沒有任何的視覺影響粱胜。

總結(jié)

margin屬性可以應(yīng)用于幾乎所有的元素柄驻，除了表格顯示類型。

padding屬性的使用1.需要在border內(nèi)測添加空白時(shí)焙压。

2.空白處需要背景（色）時(shí)凿歼。

margin是用來隔開元素與元素的間距；padding是用來隔開元素與內(nèi)容的間隔冗恨。margin用于布局分開元素使元素與元素互不相干；padding用于元素與內(nèi)容之間的間隔味赃，讓內(nèi)容（文字）與（包裹）元素之間有一段“呼吸距離”掀抹。

5.編碼實(shí)戰(zhàn)

6.擴(kuò)展思考

什么是margin折疊？

在CSS中心俗，兩個(gè)或以上的塊元素（可能是兄弟傲武，也可能不是）之間的相鄰?fù)膺吘嗫梢员缓喜⒊梢粋€(gè)單獨(dú)的外邊距。通過此方式合并的外邊距被稱為折疊城榛，且產(chǎn)生的已合并的外邊距被稱為折疊外邊距揪利。 處于同一個(gè)塊級(jí)上下文中的塊元素，沒有行框狠持、沒有間隙疟位、沒有內(nèi)邊距和邊框隔開它們，這樣的元素垂直邊緣毗鄰喘垂，則稱之為相鄰甜刻。

7.參考文獻(xiàn)

參考一：margin的詳細(xì)用法

參考二：怎么區(qū)分margin 和 padding的區(qū)別。

參考三盒子模型知多少

參考四margin為負(fù)值產(chǎn)生的影響和常見布局應(yīng)用

8.更多討論

1.margin和padding可以為負(fù)的嘛正勒？?

margin使用負(fù)數(shù)比較常見得院，使用負(fù)數(shù)是為了讓標(biāo)簽向某個(gè)方位縮進(jìn)，這樣就不用加position屬性來定位了章贞，例如多個(gè)div使用負(fù)數(shù)可以達(dá)到層疊的效果祥绞，有點(diǎn)類似多張白紙疊在一起的感覺

而padding使用負(fù)數(shù)的話，一般頁面效果會(huì)更差，至少我還沒想到怎樣的頁面布局需要用到padding的負(fù)數(shù)值

2.子元素蜕径、父元素的垂直margin如何計(jì)算

以兩個(gè)值中最大的值為標(biāo)準(zhǔn).

3.如何利用margin設(shè)置垂直水平居中两踏？

塊級(jí)元素margin{? ?0 , auto? ? }

4.負(fù)值margin有什么常見用法，雙飛翼布局是什么原理

1.水平垂直居中 2.去除列表最后一個(gè)li元素的border-bottom3.多列等高

5.為什么垂直相鄰margin會(huì)重合

css規(guī)定兩個(gè)或多個(gè)塊級(jí)盒子的垂直相鄰邊界會(huì)重合丧荐。結(jié)果的邊界寬度是相鄰邊界寬度中最大的值缆瓣。如果出現(xiàn)負(fù)邊界，則在最大的正邊界中減去絕對(duì)值最大的負(fù)邊界虹统。

6.padding設(shè)為百分比時(shí)是相對(duì)于什么計(jì)算的

相對(duì)于父級(jí)元素.

7.怎樣防止margin重疊

應(yīng)用BFC

ppt:https://ptteng.github.io/WEB/ppt/margin與padding的區(qū)別.html#/

騰訊視頻:?https://v.qq.com/x/page/m0522zbvb9h.html

鳴謝

感謝大家觀看

By吳昊杰