用 margin 還是用 padding ？

liukai90 發(fā)布于2019-08-02 10:17 / 1732人閱讀

摘要：空白區(qū)通常是指其他元素不能出現(xiàn)且父元素背景可見的區(qū)域。很自然，用于影響這個(gè)區(qū)域的屬性是。權(quán)威指南何時(shí)應(yīng)當(dāng)使用需要在外側(cè)添加空白時(shí)。是用來隔開元素與元素的間距用于布局分開元素使元素與元素互不相干。何時(shí)應(yīng)當(dāng)時(shí)用需要在內(nèi)測添加空白時(shí)。

邊界（margin）：元素周圍生成額外的空白區(qū)。“空白區(qū)”通常是指其他元素不能出現(xiàn)且父元素背景可見的區(qū)域。補(bǔ)白（padding）：補(bǔ)白位于元素框的邊界與內(nèi)容區(qū)之間。很自然，用于影響這個(gè)區(qū)域的屬性是padding。
——CSS權(quán)威指南

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

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

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

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

margin 是用來隔開元素與元素的間距

margin用于布局分開元素使元素與元素互不相干。

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

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

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

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

padding 是用來隔開元素與內(nèi)容的間隔。

padding 用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段“呼吸距離”。

參考資料：http://www.hicss.net/use-marg...

GPU云服務(wù)器云服務(wù)器 erp用服務(wù)器還是用云平臺還是用云服務(wù)器微微電話用網(wǎng)絡(luò)還是專線企業(yè)用私有云還是公有云

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/52252.html

相關(guān)文章

用Margin還是用Padding？（轉(zhuǎn)載）

摘要：個(gè)人認(rèn)為是用來隔開元素與元素的間距是用來隔開元素與內(nèi)容的間隔。舉個(gè)例子吧用還是用我是，我只是想和我的父元素隔開點(diǎn)距離，這樣看起來舒服。轉(zhuǎn)載出自?海玉的博客?本文地址:?http://www.hicss.net/use-margin-or-padding/ 用margin還是用padding這個(gè)問題是每個(gè)學(xué)習(xí)CSS進(jìn)階時(shí)的必經(jīng)之路。 CSS邊距屬性定義元素周圍的空間。通過使用單獨(dú)的屬性，可以對...

cnTomato 2019-04-23 11:56 評論0 收藏0
用 margin 還是用 padding ？

摘要：空白區(qū)通常是指其他元素不能出現(xiàn)且父元素背景可見的區(qū)域。很自然，用于影響這個(gè)區(qū)域的屬性是。權(quán)威指南何時(shí)應(yīng)當(dāng)使用需要在外側(cè)添加空白時(shí)。是用來隔開元素與元素的間距用于布局分開元素使元素與元素互不相干。何時(shí)應(yīng)當(dāng)時(shí)用需要在內(nèi)測添加空白時(shí)。邊界（margin）：元素周圍生成額外的空白區(qū)。空白區(qū)通常是指其他元素不能出現(xiàn)且父元素背景可見的區(qū)域。補(bǔ)白（padding）：補(bǔ)白位于元素框的邊界與內(nèi)容區(qū)之間...

zhaofeihao 2019-08-29 15:14 評論0 收藏0
css魔幻屬性跟進(jìn)篇

摘要：中是這樣定義的屬性指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。其同樣適用于設(shè)置屬性為絕對定位或固定定位的內(nèi)聯(lián)元素。至于為什么，可以理解為內(nèi)聯(lián)元素沒有盒模型，其高度由內(nèi)容決定。白話：即上一篇我腦中飄來飄去的css魔幻屬性自己的文章推出之后，這是自己寫的第四篇CSS相關(guān)的文章，文章絕大部分是自己工作總結(jié)得來，另一部分是平日sf回答的與面試中向面試官交流學(xué)到的，都是一...

oogh 2019-08-30 14:16 評論0 收藏0
【基礎(chǔ)】EM 還是 REM？這是一個(gè)問題！

摘要：但問題是究竟該用還是呢關(guān)于這個(gè)問題一直存在比較大的爭議。上述現(xiàn)象的出現(xiàn)，是因?yàn)槭窍鄬τ诋?dāng)前元素字體的大小。什么是表示，它是相對于根元素的長度單位。還是在項(xiàng)目開發(fā)中究竟是選用還是一直以來爭議不斷。這就是前述規(guī)則中的第一條規(guī)則。簡言應(yīng)用象EM 和 REM這種相對長度單位進(jìn)行頁面排版是WEB開發(fā)中的最佳實(shí)踐。在頁面排版中較好應(yīng)用EM 和 REM，根據(jù)設(shè)備尺寸縮放顯示元素的大小。這就使得組...

lk20150415 2019-08-29 15:07 評論0 收藏0
New CSS Logical Properties! - The Next Step of CSS

摘要：目前為止，支持類似這種多方向網(wǎng)站的最佳方式，依然是使用和變量。在英文網(wǎng)站，寬度屬性用表示，高度屬性用表示。在英文網(wǎng)站中更多常用于，它的值升級為代替。在英文網(wǎng)站中，物理屬性與邏輯屬性的表現(xiàn)是一致的。原文鏈接：https://medium.com/@elad/new-... 原文作者：Elad Shechter 簡介在過去，大多數(shù)程序猿在思考布局時(shí)總是習(xí)慣于從上下左右的角度出發(fā)。這是...

zhoutao 2019-08-30 15:44 評論0 收藏0