margin外邊距疊加簡單程式碼例項
本章節分享一段程式碼例項,它演示了外邊距合併這個現象。
更多關於外邊距合併的內容可以參閱margin外邊距合併詳解一章節。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div { color:black; background: #ccc; margin-top: 50px; margin-bottom: 30px; width:500px; height: 50px; line-height:50px; border: 1px solid red; } </style> </head> <body> <div>螞蟻部落歡迎您,歡迎提供各種意見</div> <div>本站的url地址是softwhy.com</div> <div>只有努力奮鬥才會有美好的未來</div> </body> </html>
上下外邊距會產生合併現象,如果不合並的話,上下的距離是80px,但是由於合併,所以選取較大的那個margin值,所以上下相距的尺寸是50px。
相關文章
- CSS 外邊距(margin)重疊及防止方法CSS
- CSS margin外邊距CSS
- CSS margin 外邊距CSS
- margin系列之外邊距摺疊
- 深入理解CSS外邊距摺疊(Margin Collapse)CSS
- CSS margin負外邊距CSS
- body 預設具有margin外邊距
- css中內邊距是padding,外邊距是marginCSSpadding
- css相鄰選擇器設定li元素外邊距程式碼例項CSS
- 負外邊距margin對寬度的影響
- 絕對定位對margin外邊距的影響
- 負外邊距margin對浮動元素的影響
- jquery包括margin外邊距的outerWidth或者outerHeightjQuery
- jQuery offset()返回值與外邊距margin的關係jQuery
- js選項卡簡單程式碼例項JS
- float浮動元素不會有margin外邊距合併效果
- body在預設情況下是具有margin外邊距的
- jQuery獲取網頁中的元素距離文件邊緣的距離程式碼例項jQuery網頁
- [邊學邊練]用簡單例項學習React單例React
- js map集合簡單程式碼例項JS
- javascript閉包簡單程式碼例項JavaScript
- javascript作用域簡單例項程式碼JavaScript單例
- JSON簡單格式程式碼例項JSON
- JavaScript 動畫效果簡單例項程式碼JavaScript動畫單例
- 負外邊距margin對於絕對定位元素的影響
- jQuery表單驗證簡單程式碼例項jQuery
- jQuery實現的簡單投票簡單程式碼例項jQuery
- 文字嵌入邊框程式碼例項
- css多重邊框程式碼例項CSS
- jQuery鏈式呼叫簡單例項程式碼jQuery單例
- prototype原型繼承簡單程式碼例項原型繼承
- jquery自定義事件簡單例項程式碼jQuery事件單例
- js簡單日曆效果程式碼例項JS
- js簡單的留言功能程式碼例項JS
- js簡單摺紙效果程式碼例項JS
- jQuery簡單調色器程式碼例項jQuery
- 淡入淡出效果簡單程式碼例項
- scss自動生成margin padding邊距CSSpadding