CSS: margin疊加幾種情況

margin疊加的意思是:當(dāng)兩個或者更多的垂直外邊距?相遇時妙色,它們將形成一個外邊距,這個外邊距的高度等于兩個發(fā)生疊加的外邊距中高度較大者。

1.當(dāng)一個元素出現(xiàn)在另一個元素上面時,第一個元素的底邊外邊距與第二個元素的頂邊外邊距發(fā)生疊加。如圖:

2.當(dāng)一個元素在另一個元素中時镇草,它們的頂邊距和低邊距也會發(fā)生疊加

3. 如果一個元素是空元素(即一個元素沒有內(nèi)容,內(nèi)邊距和邊框)瘤旨,這種情況外邊距的頂邊距和低邊距碰在一起也會發(fā)生疊加

4.在上面那種空元素的情況梯啤,如果該空元素與另一個元素的外邊距碰在一起,也會發(fā)生疊加存哲。

注:?以上4種外邊距疊加情況只會發(fā)生在普通文檔流的垂直方向因宇。行內(nèi)框、浮動框祟偷、絕對定位框之間的外邊距不會發(fā)生疊加察滑,同樣水平方向也不會發(fā)生疊加。

參考書籍:精通css,高級web標(biāo)準(zhǔn)解決方案

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末修肠,一起剝皮案震驚了整個濱河市贺辰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌嵌施,老刑警劉巖饲化,帶你破解...
    沈念sama閱讀 219,490評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異吗伤,居然都是意外死亡吃靠,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評論 3 395
  • 文/潘曉璐 我一進(jìn)店門足淆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來巢块,“玉大人礁阁,你說我怎么就攤上這事∽迳荩” “怎么了姥闭?”我有些...
    開封第一講書人閱讀 165,830評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長歹鱼。 經(jīng)常有香客問我泣栈,道長,這世上最難降的妖魔是什么弥姻? 我笑而不...
    開封第一講書人閱讀 58,957評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮掺涛,結(jié)果婚禮上庭敦,老公的妹妹穿的比我還像新娘。我一直安慰自己薪缆,他們只是感情好秧廉,可當(dāng)我...
    茶點故事閱讀 67,974評論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著拣帽,像睡著了一般疼电。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上减拭,一...
    開封第一講書人閱讀 51,754評論 1 307
  • 那天蔽豺,我揣著相機(jī)與錄音,去河邊找鬼拧粪。 笑死修陡,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的可霎。 我是一名探鬼主播魄鸦,決...
    沈念sama閱讀 40,464評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼癣朗!你這毒婦竟也來了拾因?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤旷余,失蹤者是張志新(化名)和其女友劉穎绢记,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體荣暮,經(jīng)...
    沈念sama閱讀 45,847評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡庭惜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,995評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了穗酥。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片护赊。...
    茶點故事閱讀 40,137評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡惠遏,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出骏啰,到底是詐尸還是另有隱情节吮,我是刑警寧澤,帶...
    沈念sama閱讀 35,819評論 5 346
  • 正文 年R本政府宣布判耕,位于F島的核電站透绩,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏壁熄。R本人自食惡果不足惜帚豪,卻給世界環(huán)境...
    茶點故事閱讀 41,482評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望草丧。 院中可真熱鬧狸臣,春花似錦、人聲如沸昌执。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽懂拾。三九已至煤禽,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間岖赋,已是汗流浹背檬果。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留贾节,地道東北人汁汗。 一個月前我還...
    沈念sama閱讀 48,409評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像栗涂,于是被迫代替她去往敵國和親知牌。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,086評論 2 355

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案斤程? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評論 1 92
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,060評論 0 1
  • 標(biāo)準(zhǔn)盒模型忿墅、怪異盒模型 CSS中Box model是分為兩種:: W3C標(biāo)準(zhǔn)(標(biāo)準(zhǔn)盒模型) 和 IE標(biāo)準(zhǔn)盒子模型(...
    陸lmj閱讀 368評論 0 0
  • 3.1 盒子模型概述 盒子模型是CSS 的基石之一,它指定元素如何顯示以及(在某種程度上)如何相互交互.頁面上的每...
    Yisuo煙雨閱讀 215評論 0 0
  • 1.HTML微格式 由于HTML中缺少相應(yīng)的元素扁藕,很難突出顯示人、地點或日期等類型的信息疚脐。為了解決這個問題亿柑,有一組...
    韓懿軒閱讀 710評論 0 4