解決margin-top或者margin-bottom無(wú)效的問(wèn)題

問(wèn)題: 給一個(gè)div添加margin-top發(fā)現(xiàn)效果作用在了父元素上镐侯,就是說(shuō),看起來(lái)是父元素加了margin
html:

<body>
  <div class="partner">
    <div class="child"></div>
  </div>
</body>

style:

body{
      background:#dddddd;
      margin:0;
      padding: 0;
    }
    .partner{
      width:200px;
      height:200px;
      background:pink
    }
    .child{
      width:100px;
      height:100px;
      background:burlywood;
    }

此時(shí)沒(méi)加margin,效果圖如下:

未加margin

此時(shí)div緊靠在左上角。

.child添加margin-top:30px之后抱既,我們?cè)O(shè)想的是子元素與父元素之間會(huì)有30px的間距剪返,查看下方效果圖發(fā)現(xiàn),明顯與我們?cè)O(shè)想不一致

添加margin-top

此時(shí)發(fā)現(xiàn)倚搬,父元素上方出現(xiàn)30px的距離冶共。
原因:
所有毗鄰的兩個(gè)或更多盒元素的margin將會(huì)合并為一個(gè)margin共享之。毗鄰的定義為:同級(jí)或者嵌套的盒元素每界,并且它們之間沒(méi)有非空內(nèi)容捅僵、 Padding或Border分隔。 CSS2.1規(guī)定浮動(dòng)元素和絕對(duì)定位元素不參與Margin折疊
如何解決眨层?
既然已經(jīng)知道是margin發(fā)生了重疊庙楚,并且知道了浮動(dòng)元素和絕對(duì)定位元素不會(huì)出現(xiàn)margin折疊,那就讓他們變成浮動(dòng)或者定位元素就好了呀
所以趴樱,我們可以用padding代替margin,或者給父元素加border讓兩個(gè)元素分隔開(kāi)馒闷,再或者你可以試試floatoverflow叁征、position

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末纳账,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子捺疼,更是在濱河造成了極大的恐慌疏虫,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,640評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異卧秘,居然都是意外死亡呢袱,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門斯议,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)产捞,“玉大人,你說(shuō)我怎么就攤上這事哼御∨髁伲” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 165,011評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵恋昼,是天一觀的道長(zhǎng)看靠。 經(jīng)常有香客問(wèn)我,道長(zhǎng)液肌,這世上最難降的妖魔是什么挟炬? 我笑而不...
    開(kāi)封第一講書人閱讀 58,755評(píng)論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮嗦哆,結(jié)果婚禮上谤祖,老公的妹妹穿的比我還像新娘。我一直安慰自己老速,他們只是感情好粥喜,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,774評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著橘券,像睡著了一般额湘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上旁舰,一...
    開(kāi)封第一講書人閱讀 51,610評(píng)論 1 305
  • 那天锋华,我揣著相機(jī)與錄音,去河邊找鬼箭窜。 笑死毯焕,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的磺樱。 我是一名探鬼主播芥丧,決...
    沈念sama閱讀 40,352評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼坊罢!你這毒婦竟也來(lái)了续担?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 39,257評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤活孩,失蹤者是張志新(化名)和其女友劉穎物遇,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,717評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡询兴,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,894評(píng)論 3 336
  • 正文 我和宋清朗相戀三年乃沙,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诗舰。...
    茶點(diǎn)故事閱讀 40,021評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡警儒,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出眶根,到底是詐尸還是另有隱情蜀铲,我是刑警寧澤,帶...
    沈念sama閱讀 35,735評(píng)論 5 346
  • 正文 年R本政府宣布属百,位于F島的核電站记劝,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏族扰。R本人自食惡果不足惜厌丑,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,354評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望渔呵。 院中可真熱鬧怒竿,春花似錦、人聲如沸扩氢。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,936評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)类茂。三九已至,卻和暖如春托嚣,著一層夾襖步出監(jiān)牢的瞬間巩检,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,054評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工示启, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留兢哭,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,224評(píng)論 3 371
  • 正文 我出身青樓夫嗓,卻偏偏與公主長(zhǎng)得像迟螺,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子舍咖,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,974評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5矩父? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,486評(píng)論 1 45
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案排霉? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • 一窍株、CSS入門 1、css選擇器 選擇器的作用是“用于確定(選定)要進(jìn)行樣式設(shè)定的標(biāo)簽(元素)”。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,596評(píng)論 0 6
  • 本課來(lái)自http://www.imooc.com/learn/9請(qǐng)不要用作商業(yè)用途球订。 HTML5 HTML介紹 H...
    PYLON閱讀 3,229評(píng)論 0 5
  • 下雪天對(duì)于孩子來(lái)說(shuō)可是一件特別高興的事后裸,又可盡情地玩雪了。剛吃完飯就想出去玩一會(huì)兒冒滩,我說(shuō)早晨外面有點(diǎn)冷微驶,稍微暖...
    侯耀斐媽媽閱讀 297評(píng)論 0 3