CSS margin 外邊距
margin 單詞翻譯成漢語之後“盈餘”和“元素外空白”的意思。
那麼使用 margin 作為屬性規定元素的外邊距恰如其分。
既然是外邊距,那一定是元素外部的區域,準確的說就是在 border 邊框外建立的"空白"區域。
盒模型圖示如下:
程式碼片段如下:
[CSS] 純文字檢視 複製程式碼margin:5px 15px 35px 45px;
margin 屬性可以有 1-4 個屬性值用來規定四個方位的外邊距。
屬性值規則如下:
(1).如果提供四個屬性值,將會按照上右下左的順序分別作用於四個方位。
(2).如果只提供一個,作用於四個方位。
(3).如果提供兩個,第一個作用於上下方位,第二個作用於左右方位。
(4).如果提供三個,第一個用於上方位,第二個用於左、右方位,第三個用於下方位。
塊級元素與內聯元素外邊距的區別:
(1).塊級元素沒有意外情況,包括塊級內聯元素。
(2).內聯元素在左右方位同樣完全沒有問題,但是上下方位可能出現想象不到的現象。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .box { width: 200px; height: 100px; border: 2px dotted #ccc; overflow: hidden; } .ant { width: 150px; height: 50px; border: 2px dotted green; margin: 40px 20px 30px 10px; } </style> </head> <body> <div class="box"> <div class="ant"></div> </div> </body> </html>
上述程式碼執行效果截圖如下:
分別設定上、右、下、左的 margin 值為:40px、 20px 、30px 和 10px。
特別說明:預設情況下,優先滿足左外邊距和上外邊距,具體參閱右外邊距失效一章節。
百分比定義 margin 屬性值:
margin 屬性值不但可以是 <length> 形式,也可以使用百分比。
程式碼片段如下:
[CSS] 純文字檢視 複製程式碼div { margin: 20% }
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .box { width: 200px; height: 100px; border: 2px dotted #ccc; overflow: hidden; } .ant{ width: 150px; height: 50px; border: 2px dotted green; margin: 20%; } </style> </head> <body> <div class="box"> <div class="ant"></div> </div> </body> </html>
程式碼執行效果截圖如下:
百分數是以塊級父元素的寬度尺寸為參考,只參考寬度尺寸。
單獨設定某一方位margin值:
上面的程式碼都是一次性設定四個方位的內邊距。
也可以單獨設定某一方位的內邊距,使用如下屬性即可:
(1).margin-top:設定上內邊距。
(2).margin-right:設定右內邊距。
(3).margin-bottom:設定下內邊距。
(4).margin-left: 設定左內邊距。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .box { width: 200px; height: 100px; border: 2px dotted #ccc; overflow: hidden; } .ant { width: 150px; height: 50px; border: 2px dotted green; margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; } </style> </head> <body> <div class="box"> <div class="ant"></div> </div> </body> </html>
上述程式碼執行效果截圖如下:
padding 是複合屬性,可以單獨設定某一方位的內邊距。
特別說明:在無必要的情況下,不推薦使用上述方式設定內邊距。
相關文章
- CSS margin外邊距CSS
- CSS margin負外邊距CSS
- css中內邊距是padding,外邊距是marginCSSpadding
- CSS 外邊距(margin)重疊及防止方法CSS
- 深入理解CSS外邊距摺疊(Margin Collapse)CSS
- body 預設具有margin外邊距
- CSS 負外邊距CSS
- CSS 右外邊距失效CSS
- CSS 外邊距合併CSS
- 負外邊距margin對寬度的影響
- 絕對定位對margin外邊距的影響
- margin外邊距疊加簡單程式碼例項
- 負外邊距margin對浮動元素的影響
- jquery包括margin外邊距的outerWidth或者outerHeightjQuery
- margin系列之外邊距摺疊
- jQuery offset()返回值與外邊距margin的關係jQuery
- float浮動元素不會有margin外邊距合併效果
- body在預設情況下是具有margin外邊距的
- 負外邊距margin對於絕對定位元素的影響
- CSS中父物件的內邊距是否對子物件的外邊距造成影響CSS物件
- scss自動生成margin padding邊距CSSpadding
- 用padding和margin撐起左右邊距padding
- CSS 右內邊距失效CSS
- CSS 盒子的邊距塌陷CSS
- CSS中的負邊距CSS
- 外邊距與絕對定位
- CSS padding內邊距CSSpadding
- CSS padding 內邊距CSSpadding
- matlab控制影象的邊界(margin),subplot的間距(gap)Matlab
- css邊距重疊的解決方案CSS
- CSS-盒子模型-邊距合併CSS模型
- css相鄰選擇器設定li元素外邊距程式碼例項CSS
- css marginCSS
- 前端面試必備——外邊距合併前端面試
- 面試之CSS篇 - 邊距重疊與BFC面試CSS
- 外邊距在定位元素中的情況
- css中的外邊距合併時垂直方向上的普通流相鄰元素間CSS
- 12.9學習日報(盒子模型和各類注意事項、margin垂直外邊距合併、頂部塌陷問題)模型