margin-top失效傳遞給父元素解決方案
可能在有些時候,大家會遇到這樣的情況,那就是給子元素設定的上外邊距會傳遞給父元素。
先看一段程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box { width:200px; height:100px; background:#ccc; } #inner { width:100px; height:50px; background:blue; margin-top:20px; } </style> </head> <body> <div id="box"> <div id="inner"></div> </div> </body> </html>
上面的程式碼在IE8和IE8以上瀏覽器還有其他標準瀏覽器中,都會將子元素的上外邊距傳遞給父元素。
根據規範,一個盒子如果沒有上內邊距和上邊框,那麼它的上邊距應該和其文件流中的第一個孩子元素的上邊距重疊。
解決方法非常簡單,那就是反其道而行之,比如設定上內邊距或者上邊框,或者觸發BFC。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box { width:200px; height:100px; background:#ccc; border-top:1px solid red; } #inner { width:100px; height:50px; background:blue; margin-top:20px; } </style> </head> <body> <div id="box"> <div id="inner"></div> </div> </body> </html>
上面的程式碼解決了margin-top失效問題,當然使用何種方式解決要看實際情況,你不能客戶要求不能有上邊框,你非要加上一個上邊框,可選擇的方式還是很多的。
相關文章
- 將子元素的margin-top傳遞給父元素
- 子元素的margin-top作用於外層父元素解決方法
- margin-top影響父元素定位
- 子元件給父親傳遞資料元件
- 為什麼margin-top對父元素有效
- 為什麼margin-top不是作用於父元素
- 子元素浮動導致父元素沒有被撐開解決方案
- 父元素沒有被撐開塌陷問題解決方案
- svg給直線應用線性漸變失效解決方案SVG
- Vue : props 使用細節(父元件傳遞資料給子元件)Vue元件
- vue3 父元件給子元件傳遞泛型(不用JSX)Vue元件泛型JS
- vue中子元件傳遞父元件$emitVue元件MIT
- 元件中 子給父傳值元件
- 解決子元素浮動,父元素沒有撐開的問題
- js的url傳遞中文引數亂碼的解決方案JS
- vue子元件向父元件傳遞值Vue元件
- 子元件給父元件傳資料元件
- iOS 給父類傳送訊息iOS
- 子元素超過父元素padding-right和margin-right失效padding
- table表格中text-overflow失效解決方案
- Asp.Net處理Session失效解決方案ASP.NETSession
- 記webpack的HRM失效的幾個解決方案Web
- 蘋果手機on繫結click事件失效解決方案蘋果事件
- 【VUE入門】父元件給子元件傳值Vue元件
- VUE 父元件動態傳值給子元件Vue元件
- iframe利用get方式傳遞中文引數會出現亂碼解決方案
- [WEB開發]html頁面向後臺傳遞url中文亂碼解決方案WebHTML
- 動態生成html元素繫結事件iphone失效問題解決HTML事件iPhone
- 這一次,徹底解決Java的值傳遞和引用傳遞Java
- Laravel 5.8+scout7.0 使用 orderBy 排序失效解決方案Laravel排序
- vue 基礎入門筆記 13:父元件向子元件傳值、父元件向子元件傳遞方法Vue筆記元件
- 就這?Spring 事務失效場景及解決方案Spring
- openSSH升級公鑰失效Permission denied (publickey)解決方案
- 三種方法解決浮動元素父容器高度自適應問題
- js通過contentWindow控制iframe子頁面元素點選事件,並把值傳給父頁面JS事件
- rake 任務引數傳遞問題解決
- js如何元素當前元素所有的父元素JS
- 給vue元件傳遞物件或是陣列Vue元件物件陣列