為什麼子元素設定margin-top會作用在父元素上？
原因在於：CSS 外邊距合併
復現：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> html * { margin:0; padding: 0; } </style> <body> <section style = "background:orange;"> <article style ='height:100px;margin-top:40px;background:red'></article> </section> </body> </html>
這裡子元素設定margin-top會作用在父元素上了。
解決方法：
1、為父元素設定padding。
2、為父元素設定border。
2、為父元素設定 overflow: hidden 。
相關推薦
為什麼子元素設定margin-top會作用在父元素上？
原因在於：CSS 外邊距合併 復現： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>
子元素設定margin-top會作用在父元素上？如何解決呢
在實戰中發現子級在父級中設定margin-top的時候，會失效，而會附加在父級上，相信大家也會遇到過這種情況，那這是怎麼回事呢？要如何解決呢？那麼我們看一下例子吧： HTML程式碼： <body> <div> <p></p&
如何解決子div設定margin-top時影響父div的margin-top
測試程式碼如下： <!DOCTYPE html> <html> <head><title></title><style type="text/css">.container{width: 50%;mar
為什麽子元素設置margin-top會作用在父元素上？
school overflow blank pad over lan 子元素 sch div 原因在於：CSS 外邊距合並 復現： <!DOCTYPE html> <html lang="en"> <head> <meta
css:子元素設定margin-top父元素會跟著移動（margin塌陷）
程式碼如下： 效果如圖： 這種情況成為margin塌陷：父子元素的margin-top屬性，會共用值最大的那個。所以父元素公用了子元素的margin-top值，自然也就跟著移動了。 解決方法:bfc 觸發bfc的方法有以下幾種： position:absolute; disp
為什麼第一個子元素設定margin-top父元素會跟著移動（附解決方案）
問題： 有時當我們設定子元素的margin-top，但是卻發現子元素沒有出現上外邊距的效果，反而是父元素出現了上外邊距的效果。 原因： 邊距重疊：一個盒子和其子孫的邊距重疊。根據規範，一個盒子如果沒有上補白和上邊框，那麼它的上邊距應該和其文件流中的第一個孩子元素
子元素設定margin-top影響父級元素的位置（轉發）
前提：子元素要是塊級元素； ——————————————————————————————————— 相信很多前端同學在做頁面開發的時候都遇到過這樣的問題。給一個div內部的div設定一個margin-top，結果它的父級跟著它一起下移了。如下面的程式碼 .a {
子級元素設的margin-top會超出父級的範圍
垂直方向會出現這個問題，水平方向不會出現！ 解決方法為給子元素新增浮動或者加padding-top取代margin-top webstorm： .footer_logo{ font-size
關於子元素的margin-top溢出和元素浮動對父元素高度影響解決方案
20px oat -- 外邊距 生成 round border top display 以下是個人學習筆記，僅供學習參考。 1.關於子元素的margin-top作用在無margin-top-border的父元素上導致子元素的margin-top溢出問題。 在給沒有margi
解決：子div設定margin-top使得父div也跟著向下移動
之前在寫網頁的時候，發現一個小問題，就是子div設定margin-top的時候，父的div也會跟著向下移動。我用程式碼和圖描述一下問題： <style> *{margin:0;pad
子DIV設定margin-top影響父DIV位置
<pre name="code" class="html"><style type="text/css" media="screen"> *{margin: 0;padding: 0;} .pare{width: 600px;height:
子div塊中設定margin-top時影響父div塊位置的解決辦法及其原因
解決辦法①: 若子DIV塊中使用margin-top,則在父DIV塊中新增：overflow:hidden; 解決辦法②: 在子DIV塊中用padding-top代替margin-top。 有個叫 bfc 的東西 叫 塊級元素格式化上下文 overflow hidden 或者描邊可以觸發 bf
子DIV塊中設定margin-top時影響父DIV塊位置問題
相信很多前端同學在做頁面開發的時候都遇到過這樣的問題。給一個div內部的div設定一個margin-top，結果它的父級跟著它一起下移了。如下面的程式碼.a { width:100px; height:100px; } .b { width:50px; height:50px;
子DIV塊中設定margin-top時影響父DIV塊位置的解決辦法
在文章《實現文字滾動》中子DIV塊#main中設定margin-top時，若父DIV塊#box中沒有“overflow:hidden;”,則子DIV塊中margin-top會影響父DIV塊的位置 解決辦法1: 若子DIV塊中使用margin-top,則在父DIV塊中新增：overflow:hidden; 解
關於css中父元素與子元素之間margin-top的問題
可用 技術分享 一個 src 文檔流 重疊 cond one left 之前在使用經常遇到下面的問題： html： 1 <div class="top"> 2 <div class="one">I‘m the first!</div&
關於子元素的margin-top影響父元素的問題
樣式 程式碼 <div style="background: red;width: 700px;height: 700px;"> <div style="margin-top: 100px;background: green;height: 100px;
css父元素和子元素之間margin-top的問題
問題：父元素的盒子包含一個子元素盒子，給子元素盒子一個垂直外邊距margin-top，父元素的盒子也會受到子元素的margin-top值的影響。 原因：所有毗鄰的兩個或者多個元素的margin將會合併為一個margin共享之。毗鄰的定義為：同級或者巢狀的盒元素，並且它們之間沒有非空內容。padding或者b
margin塌陷問題：父元素與子元素之間的margin-top問題
1.邊界疊加有幾種情況： 元素的頂邊界與前面元素的底邊界發生疊加； 元素的頂邊界與父元素的頂邊界發生疊加； 空元素的頂邊界與底邊界發生疊加； 空元素中已經疊加的邊界與另一個空元素的邊界發生疊加。 2.解決方案： （1）為外層元素新增padding-top進行模擬； （2）新
設定margin-top值時，溢位到父元素
給子元素margin-top時，若這個子元素前面沒有其他內容，這個margin-top值會應用到父元素上 解決方案，給父元素設定：before body:before{ content: ""; display: table; /*或者d
父元素和子元素的margin-top問題
父元素和子元素的margin-top問題 父元素盒子包含子元素盒子，給父元素設定margin-top有效果，但給子元素設定margin-top，父元素和子元素的距離沒有變化，但是父元素盒子會往下走子元素的margin-top的值。這個就是典型的margin摺疊問題。 原理：marg