华南俳烁实业有限公司

考試首頁(yè) | 考試用書(shū) | 培訓(xùn)課程 | 模擬考場(chǎng) | 考試論壇  
  當(dāng)前位置:設(shè)計(jì)制作 > CSS/HTML > 文章內(nèi)容
  

CSS外邊距合并屬性:外邊距合并

 [ 2016年6月7日 ] 【

外邊距合并指的是,當(dāng)兩個(gè)垂直外邊距相遇時(shí),它們將形成一個(gè)外邊距。

合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

外邊距合并

外邊距合并(疊加)是一個(gè)相當(dāng)簡(jiǎn)單的概念。但是,在實(shí)踐中對(duì)網(wǎng)頁(yè)進(jìn)行布局時(shí),它會(huì)造成許多混淆。

簡(jiǎn)單地說(shuō),外邊距合并指的是,當(dāng)兩個(gè)垂直外邊距相遇時(shí),它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí),第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。請(qǐng)看下圖:

CSS 外邊距合并實(shí)例 1

親自試一試

當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)(假設(shè)沒(méi)有內(nèi)邊距或邊框把外邊距分隔開(kāi)),它們的上和/或下外邊距也會(huì)發(fā)生合并。請(qǐng)看下圖:

CSS 外邊距合并實(shí)例 2

親自試一試

盡管看上去有些奇怪,但是外邊距甚至可以與自身發(fā)生合并。

假設(shè)有一個(gè)空元素,它有外邊距,但是沒(méi)有邊框或填充。在這種情況下,上外邊距與下外邊距就碰到了一起,它們會(huì)發(fā)生合并:

CSS 外邊距合并實(shí)例 3

如果這個(gè)外邊距遇到另一個(gè)元素的外邊距,它還會(huì)發(fā)生合并:

CSS 外邊距合并實(shí)例 4

這就是一系列的段落元素占用空間非常小的原因,因?yàn)樗鼈兊乃型膺吘喽己喜⒌揭黄,形成了一個(gè)小的外邊距。

外邊距合并初看上去可能有點(diǎn)奇怪,但是實(shí)際上,它是有意義的。以由幾個(gè)段落組成的典型文本頁(yè)面為例。第一個(gè)段落上面的空間等于段落的上外邊距。如果沒(méi)有外邊距合并,后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁(yè)面頂部的兩倍。如果發(fā)生外邊距合并,段落之間的上外邊距和下外邊距就合并在一起,這樣各處的距離就一致了。

CSS 外邊距合并的實(shí)際意義

注釋:只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

本文糾錯(cuò)】【告訴好友】【打印此文】【返回頂部
將考試網(wǎng)添加到收藏夾 | 每次上網(wǎng)自動(dòng)訪問(wèn)考試網(wǎng) | 復(fù)制本頁(yè)地址,傳給QQ/MSN上的好友 | 申請(qǐng)鏈接 | 意見(jiàn)留言 TOP
關(guān)于本站  網(wǎng)站聲明  廣告服務(wù)  聯(lián)系方式  站內(nèi)導(dǎo)航  考試論壇
Copyright © 2007-2013 中華考試網(wǎng)(Examw.com) All Rights Reserved
夹江县| 洛浦县| 永康市| 长兴县| 金华市| 延庆县| 牟定县| 讷河市| 望谟县| 鄂托克旗| 定边县| 无为县| 南汇区| 遵义县| 公主岭市| 平江县| 合阳县| 涟水县| 忻城县| 葵青区| 阳城县| 陈巴尔虎旗| 简阳市| 德格县| 庆阳市| 天水市| 陆丰市| 成都市| 手机| 崇明县| 申扎县| 开远市| 邹城市| 义乌市| 南安市| 延庆县| 静安区| 利辛县| 宝兴县| 梁平县| 湄潭县|