CSS 右外邊距失效
關於外邊距基本知識可以參閱 CSS margin 外邊距 一章節。
有時候元素的右外邊距可能會出現失效的情況。
首先看一段程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #box { width: 150px; height: 80px; padding: 10px; border: 2px dotted #ccc; overflow: auto; } #inner { width: 150px; height: 40px; margin: 10px; background-color: green; } </style> <body> <div id="box"> <div id="inner"></div> </div> </body> </html>
程式碼執行效果截圖如下:
程式碼分析如下:
(1).設定子元素的 margin 為 10px。
(2).可以看到子元素右外邊距好像是失效了。
(3).預設情況下,父級元素水平方位寬度不夠時,會優先保證左外邊距。
但是這種情況出現的先決條件是,子元素是塊級元素,進行如下轉換,右外邊距會生效:
[CSS] 純文字檢視 複製程式碼display: inline-block display: inline-flex display: inline-grid display: inline-table
本文不再演示,可以自行對子元素進行轉換測試效果。
相關文章
- CSS 右內邊距失效CSS
- CSS 負外邊距CSS
- CSS margin外邊距CSS
- CSS margin 外邊距CSS
- CSS margin負外邊距CSS
- CSS 外邊距合併CSS
- HTML5基礎加強css樣式篇(右外邊距失效問題解釋)(四十八)HTMLCSS
- css中內邊距是padding,外邊距是marginCSSpadding
- CSS 外邊距(margin)重疊及防止方法CSS
- CSS中父物件的內邊距是否對子物件的外邊距造成影響CSS物件
- 深入理解CSS外邊距摺疊(Margin Collapse)CSS
- CSS 盒子的邊距塌陷CSS
- CSS中的負邊距CSS
- 外邊距與絕對定位
- CSS padding內邊距CSSpadding
- CSS padding 內邊距CSSpadding
- css之左邊定寬右邊自適應CSS
- body 預設具有margin外邊距
- css邊距重疊的解決方案CSS
- CSS-盒子模型-邊距合併CSS模型
- css相鄰選擇器設定li元素外邊距程式碼例項CSS
- 前端面試必備——外邊距合併前端面試
- 面試之CSS篇 - 邊距重疊與BFC面試CSS
- 常見面試題之左邊固定,右邊自適應佈局(四種方法:負邊距、flex)面試題Flex
- 負外邊距margin對寬度的影響
- 絕對定位對margin外邊距的影響
- 外邊距在定位元素中的情況
- css中的外邊距合併時垂直方向上的普通流相鄰元素間CSS
- margin外邊距疊加簡單程式碼例項
- 負外邊距margin對浮動元素的影響
- jquery包括margin外邊距的outerWidth或者outerHeightjQuery
- 行級元素左右邊距及塊級元素上下邊距
- jQuery offset()返回值與外邊距margin的關係jQuery
- Android UI系列-----長度單位和內外邊距AndroidUI
- CSS佈局奇淫巧計之-強大的負邊距CSS
- IE CSS Bug系列:表單控制元件雙邊距BUGCSS控制元件
- 表格的邊距 邊框設定
- float浮動元素不會有margin外邊距合併效果