- 相關(guān)推薦
網(wǎng)頁(yè)設(shè)計(jì)中margin怎么用
網(wǎng)頁(yè)布局中margin也是必不可少的，那么在網(wǎng)頁(yè)設(shè)計(jì)布局中，margin應(yīng)該怎樣使用呢?
網(wǎng)頁(yè)設(shè)計(jì)中margin怎么用【1】
首先，我們先設(shè)計(jì)一個(gè)div，并且給這個(gè)div添加一個(gè)id，id名隨意取。
02
然后設(shè)置一下寬高，并且添加一個(gè)紅色的背景屬性值。
03
默認(rèn)情況下，這個(gè)div是靠近瀏覽器的頂部和左邊的。
04
接著我們給這個(gè)div設(shè)置一下margin值，從左到右表示的是上邊，右邊，下邊，左邊的margin值。
05
設(shè)置好之后，可以看到左邊和上邊都隔開(kāi)了一定的距離，這就是margin值的用處，而下邊和右邊因?yàn)闆](méi)有其他div或者其他顏色，所以效果被忽略了。
06
當(dāng)然，margin值也可以分開(kāi)寫(xiě)，比如我只設(shè)置div的上邊的margin值，就可以使用margin-top，而右邊則可以使用margin-right，左邊則是margin-left，下邊則是margin-bottom。
07
如圖，設(shè)置margin-top之后，只有上邊拉開(kāi)了距離，而左邊并沒(méi)有拉開(kāi)距離。
08
接著我們?cè)僭诰W(wǎng)頁(yè)中添加一個(gè)div，并設(shè)置id為“you”。
09
接著設(shè)置“you”這個(gè)div的寬高和背景。
10
如圖所示，新添加一個(gè)div之后，如果沒(méi)有設(shè)置margin-bottom的值，兩個(gè)div就會(huì)連在一起。
11
然后我們給上面的div，也就是“my”,設(shè)置margin-bottom。
12
設(shè)置好之后，兩個(gè)div之間就會(huì)拉開(kāi)距離，這樣就可以定位好div的位置。
13
而如果我們給“my”設(shè)置好margin-bottom之后，又給“you”設(shè)置margin-top，又會(huì)有什么結(jié)果呢?
14
結(jié)果就是這樣：有兩個(gè)相鄰的div，如果一個(gè)div設(shè)置了margin-top，另一個(gè)設(shè)置了margin-bottom，則以它們之間值最大的為準(zhǔn)。
比如margin-top是50像素，margin-bottom是30像素，則間隔就是50像素，而不是兩個(gè)相加哦。
了解這個(gè)之后，在網(wǎng)頁(yè)布局中，我們只需要對(duì)其中一個(gè)設(shè)置就可以了。
網(wǎng)頁(yè)設(shè)計(jì)中margin怎么用【2】
margin屬性是元素的邊距距離。
包括margin-top,margin-right,margin-bottom,margin-left,margin四個(gè)，可以設(shè)置元素的具體四邊的外邊距。
center，left，right只是元素的對(duì)其方式。
只能左，中，右。
最簡(jiǎn)單來(lái)說(shuō)，比如body，默認(rèn)時(shí)它的四邊距不為空，要使body緊靠頁(yè)面邊緣，就要加個(gè):
網(wǎng)頁(yè)設(shè)計(jì)中margin怎么用【3】
你真的了解margin嗎?你知道m(xù)argin有什么特性嗎?你知道什么是垂直外邊距合并?margin在塊元素、內(nèi)聯(lián)元素中的區(qū)別?
什么時(shí)候該用 padding而不是margin?
你知道負(fù)margin嗎?你知道負(fù)margin在實(shí)際工作中的用途嗎?常見(jiàn)的瀏覽器下margin出現(xiàn)的bug有哪些?……
寫(xiě)css，你少不了與margin打交道，而對(duì)于這個(gè)平時(shí)我們最常用的css屬性我們并非十分了解。
介于此我打算寫(xiě)下這篇文章，一來(lái)是自己工作中的總結(jié)，也是對(duì)自己知識(shí)的一次梳理。
[url=http://www.hntrain.net/]網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn)[/url]中的Margin是什么
CSS 邊距屬性定義元素周?chē)目臻g。
通過(guò)使用單獨(dú)的屬性，可以對(duì)上、右、下、左的外邊距進(jìn)行設(shè)置。
也可以使用簡(jiǎn)寫(xiě)的外邊距屬性同時(shí)改變所有的外邊距。
——W3School
邊界，元素周?chē)深~外的空白區(qū)。
“空白區(qū)”通常是指其他元素不能出現(xiàn)且父元素背景可見(jiàn)的區(qū)域。
——CSS權(quán)威指南
我比較喜歡使用“外邊距”這個(gè)詞來(lái)解釋margin(同理padding可以稱(chēng)之為“內(nèi)邊距”，但是我又恰恰喜歡稱(chēng)呼padding為“補(bǔ)白”或者“留白”)，
我們可以很清楚的了解到margin的最基本用途就是控制元素周?chē)臻g的間隔，從視覺(jué)角度上達(dá)到相互隔開(kāi)的目的。
Margin的特性
margin始終是透明的。
margin通過(guò)使用單獨(dú)的屬性，可以對(duì)上、右、下、左的外邊距進(jìn)行設(shè)置。
即:margin-top、margin-right、margin-bottom、margin-left。
外邊距的 margin-width 的值類(lèi)型有:auto | length | percentage
也可以使用簡(jiǎn)寫(xiě)的外邊距屬性同時(shí)改變所有的外邊距:margin: top right bottom left;
(eg: margin:10px 20px 30px 40px) 記憶方式是元素周?chē)戏巾槙r(shí)針“上右下左”記憶。
并且規(guī)范還提供了省略的數(shù)值寫(xiě)法，基本如下:
1、如果margin只有一個(gè)值，表示上右下左的margin同為這個(gè)值。
例如:margin:10px;
就等于 margin:10px 10px 10px 10px;
2、如果 margin 只有兩個(gè)值，第一個(gè)值表示上下margin值，第二個(gè)值為左右margin的值。
例如:margin:10px 20px;
就等于 margin:10px 20px 10px 20px;
3、如果margin有三個(gè)值，第一個(gè)值表示上margin值，第二個(gè)值表示左右margin的值，第三個(gè)值表示下margin的值。
例如:margin:10px 20px 30px;
就等于 margin:10px 20px 30px 20px;
4、如果margin有四個(gè)值，那這四個(gè)值分別對(duì)應(yīng)上右下左這四個(gè)margin值。
例如:margin:10px 20px 30px 40px;
在實(shí)際應(yīng)用中，個(gè)人不推薦使用三個(gè)值的margin，一是容易記錯(cuò)，二是不容易日后修改，一開(kāi)始如果寫(xiě)成margin:10px 20px 30px;
日后需求改動(dòng)為上10px，右30px，下30px，左20px，你不得不還是得把這個(gè)margin拆開(kāi)為margin:10px 30px 30px 20px;
費(fèi)力且不討好，不如一開(kāi)始就老老實(shí)實(shí)的寫(xiě)成margin:10px 20px 30px 20px;
來(lái)的實(shí)在，不要為了現(xiàn)在節(jié)省倆個(gè)字節(jié)而讓日后再次開(kāi)發(fā)的成本上升。
垂直外邊距合并問(wèn)題
別被上面這個(gè)名詞給嚇倒了，簡(jiǎn)單地說(shuō)，外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。
合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
你可以查看W3Shool CSS外邊距合并了解這個(gè)基本知識(shí)。
實(shí)際工作中，垂直外邊距合并問(wèn)題常見(jiàn)于第一個(gè)子元素的margin-top會(huì)頂開(kāi)父元素與父元素相鄰元素的間距，而且只在標(biāo)準(zhǔn)瀏覽器下
(FirfFox、Chrome、Opera、Sarfi)產(chǎn)生問(wèn)題，IE下反而表現(xiàn)良好。
例子可以查看下面代碼(IE下表現(xiàn)“正常”，標(biāo)準(zhǔn)瀏覽器下查看出現(xiàn)“bug”):
我其實(shí)只是想和我的父元素隔開(kāi)點(diǎn)距離。
如果按照CSS規(guī)范，IE的“良好表現(xiàn)”其實(shí)是一個(gè)錯(cuò)誤的表現(xiàn)，因?yàn)镮E的hasLayout渲染導(dǎo)致了這個(gè)“表現(xiàn)良好”的外觀。
而其他標(biāo)準(zhǔn)瀏覽器則會(huì)表現(xiàn)出“有問(wèn)題”的外觀。
好了，如果你讀過(guò)了上面W3Shcool的CSS外邊距合并的文章后，就很容易討論這個(gè)問(wèn)題了。
這個(gè)問(wèn)題發(fā)生的原因是根據(jù)規(guī)范，一個(gè)盒子如果沒(méi)有上補(bǔ)白(padding-top)和上邊框(border-top)，那么這個(gè)盒子的上邊距會(huì)和其內(nèi)部文檔流中的第一個(gè)子元素的上邊距重疊。
再說(shuō)了白點(diǎn)就是:父元素的第一個(gè)子元素的上邊距margin-top如果碰不到有效的border或者padding.就會(huì)不斷一層一層的找自己 “領(lǐng)導(dǎo)”(父元素，祖先元素)的麻煩。
只要給領(lǐng)導(dǎo)設(shè)置個(gè)有效的 border或者padding就可以有效的管制這個(gè)目無(wú)領(lǐng)導(dǎo)的margin防止它越級(jí)，假傳圣旨，把自己的margin當(dāng)領(lǐng)導(dǎo)的margin執(zhí)行。
對(duì)于垂直外邊距合并的解決方案上面已經(jīng)解釋了，為父元素例子中的middle元素增加一個(gè)border-top或者padding-top即可解決這個(gè)問(wèn)題。
一般說(shuō)來(lái)這個(gè)問(wèn)題解釋到這里，大多數(shù)文章就不會(huì)再深入下去了，但作為一名實(shí)戰(zhàn)開(kāi)發(fā)者，最求的是知其然知其所以然，原本使用margin-top
就是為了與父元素隔開(kāi)距離，而按照你這么一個(gè)解法，其實(shí)是一種“修復(fù)”，為了“彌補(bǔ)修復(fù)”這個(gè)父子垂直外邊距合并這個(gè)CSS規(guī)范“Bug”，
而強(qiáng)制在父元素上使用border-top和padding-top，不舒服，也不容易記住，下次再發(fā)生這樣的情況還是會(huì)忘記這條準(zhǔn)則，
而且在頁(yè)面設(shè)計(jì)稿里如果不需要 border-top加個(gè)上邊框，這么一加反而畫(huà)蛇添足，為以后修改留下隱患。
為什么一定要用border-top,padding-top去為了這么一個(gè)所謂的標(biāo)準(zhǔn)規(guī)范而多寫(xiě)這么一行代碼呢?答案你可以參考另外一篇文章用Margin還是用Padding里找到答案。
用Margin還是用Padding
何時(shí)應(yīng)當(dāng)使用margin:
需要在border外側(cè)添加空白時(shí)。
空白處不需要背景(色)時(shí)。
上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)。
如15px + 20px的margin，將得到20px的空白。
何時(shí)應(yīng)當(dāng)時(shí)用padding:
需要在border內(nèi)測(cè)添加空白時(shí)。
空白處需要背景(色)時(shí)。
上下相連的兩個(gè)盒子之間的空白，希望等于兩者之和時(shí)。
如15px + 20px的padding，將得到35px的空白。
個(gè)人認(rèn)為:margin是用來(lái)隔開(kāi)元素與元素的間距;
padding是用來(lái)隔開(kāi)元素與內(nèi)容的間隔。
margin用于布局分開(kāi)元素使元素與元素互不相干;
padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容(文字)與(包裹)元素之間有一段“呼吸距離”。
margin在塊元素、內(nèi)聯(lián)元素中的區(qū)別
HTML(這里說(shuō)的是html標(biāo)準(zhǔn)，而不是xhtml)里分兩種基本元素，即block和inline。
顧名思義，block元素就是以”塊”表現(xiàn)的元素(block-like elements)，inline元素即是以”行”表現(xiàn)的元素(character level elements and text strings)。
二者表現(xiàn)的主要差別在于，在頁(yè)面文檔中block元素另起一行開(kāi)始，并獨(dú)占一行。
inline元素則同其他inline元素共處一行。
block元素(塊元素)大致有:P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS
(隨著html5標(biāo)準(zhǔn)的推進(jìn)，一些元素將被廢除，而一些新的元素將被引入)注意的是并非所有的block元素的默認(rèn)display屬性都是 block，
像table這種display:table的元素也是block元素。
inline元素(內(nèi)聯(lián)元素)大致有:#PCDATA(即文本)| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | selec | TEXTAREA | LABEL | BUTTON
其中有類(lèi)特殊的元素:如img|input|select|textarea|button|label等，他們被稱(chēng)為可置換元素(Replaced element)。
他們區(qū)別一般inline元素(相對(duì)而言，稱(chēng)non-replaced element)是:這些元素?fù)碛袃?nèi)在尺寸(intrinsic dimensions),他們可以設(shè)置width/height屬性。
他們的性質(zhì)同設(shè)置了display:inline-block的元素一致。
或許有朋友對(duì)非置換元素(non-replaced element)有點(diǎn)疑惑，稍微幫助大家理解一下。
非置換元素，W3C 中沒(méi)有給出明確的定義，但我們從字面可以理解到，非置換元素對(duì)應(yīng)著置換元素(replaced element)，也就是說(shuō)我們搞懂了置換元素的含義，就懂了非置換元素。
置換元素，W3C中給出了定義:
“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”
從定義中我們可以理解到，置換元素(replaced element)主要是指 img, input, textarea, select, object 等這類(lèi)默認(rèn)就有 CSS 格式化外表范圍的元素。
進(jìn)而可知，非置換元素(non-replaced element)就是除了 img, input, textarea, select, object 等置換元素以外的元素。
margin在塊級(jí)元素下，他的性能可以完全體現(xiàn)，上下左右任你設(shè)定。
且記住塊級(jí)元素的margin的參照基準(zhǔn)是前一個(gè)元素即相對(duì)于自身之前的元素有margin距離。
如果元素是第一個(gè)元素，則就是相對(duì)于父元素的margin距離(但第一個(gè)元素相對(duì)于父元素margin-top而
父元素又沒(méi)有設(shè)定 padding-top/border-top的話要需要印證上面的垂直外邊距合并的知識(shí))
margin也能用于內(nèi)聯(lián)元素，這是規(guī)范所允許的，但是margin-top和margin-bottom對(duì)內(nèi)聯(lián)元素(對(duì)行)的高度沒(méi)有影響，
并且由于邊界效果(margin效果)是透明的，他也沒(méi)有任何的視覺(jué)影響。
這是因?yàn)檫吔鐟?yīng)用于內(nèi)聯(lián)元素時(shí)不改變?cè)氐男懈叨龋绻阋淖儍?nèi)聯(lián)元素的行高即類(lèi)似文本的行間距，
那么你只能使用這三個(gè)屬性:line- height，fong-size，vertical-align。
請(qǐng)記住，這個(gè)影響內(nèi)聯(lián)元素高度的是line-height而不是height，因?yàn)閮?nèi)聯(lián)元素是一行行的，定一個(gè)height的話，
那這到底是整段inline元素的高呢?還是inline元素一行的高呢?這都說(shuō)不準(zhǔn)，所以統(tǒng)一都給每行定一個(gè)高，只能是line-height了。
margin-top/margin-bottom對(duì)內(nèi)聯(lián)元素沒(méi)有多大實(shí)際效果，不過(guò)margin-left/margin-right還是能夠?qū)?nèi)聯(lián)元素產(chǎn)生影響的。
應(yīng)用margin:10px 20px 30px 40px;
，左邊這個(gè)css如果寫(xiě)在inline元素上，他的效果大致是，上下無(wú)效果，左邊離他相鄰元素或者文本距離為40px，右邊離他相鄰元素或者文本距離為20px。
你可以自行嘗試一番。
最后在內(nèi)聯(lián)元素中還有上文我們提到的非可置換inline元素(non-replaced element)，這些個(gè)元素img|input|select|textarea|button|label
雖然是內(nèi)聯(lián)元素，但margin依舊可以影響到他的上下左右!
總結(jié)下來(lái)margin 屬性可以應(yīng)用于幾乎所有的元素，除了表格顯示類(lèi)型(不包括 table-caption, table and inline-table)的元素，
而且垂直外邊距對(duì)非置換內(nèi)聯(lián)元素(non-replaced inline element)不起作用。
常見(jiàn)的瀏覽器下margin出現(xiàn)的bug
林林總總寫(xiě)了那么多，最后總結(jié)一些瀏覽器中常見(jiàn)的margin Bug吧，以后遇到margin下的布局問(wèn)題可以查看這里找到解決的方案，
如果你還發(fā)現(xiàn)其他關(guān)于瀏覽器下margin的Bug你可以發(fā)表留言，核對(duì)采納后我會(huì)及時(shí)添加進(jìn)去，感謝你的分享:
IE6中雙邊距Bug:
發(fā)生場(chǎng)合:當(dāng)給父元素內(nèi)第一個(gè)浮動(dòng)元素設(shè)置margin-left(元素float:left)或margin-right(元素float:right)時(shí)margin加倍。
解決方法:是給浮動(dòng)元素加上display:inline;
CSS屬性;
或者用padding-left代替margin-left。
原理分析:塊級(jí)對(duì)象默認(rèn)的display屬性值是block，當(dāng)設(shè)置了浮動(dòng)的同時(shí)，還設(shè)置了它的外邊距就會(huì)出現(xiàn)這種情況。
也許你會(huì)問(wèn):“為什么之后的對(duì)象和第一個(gè)對(duì)象之間就不存在雙倍邊距的Bug”?因?yàn)楦?dòng)都有其相對(duì)應(yīng)的對(duì)象，只有相對(duì)于其父對(duì)象的浮動(dòng)對(duì)象才會(huì)出現(xiàn)這樣的問(wèn)題。
第一個(gè)對(duì)象是相對(duì)父對(duì)象的，而之后對(duì)象是相對(duì)第一個(gè)對(duì)象的，所以之后對(duì)象在設(shè)置后不會(huì)出現(xiàn)問(wèn)題。
為什么display:inline可以解決這個(gè)雙邊距bug，首先是 inline元素或inline-block元素是不存在雙邊距問(wèn)題的。
然后，float:left等浮動(dòng)屬性可以讓inline元素 haslayout，會(huì)讓inline元素表現(xiàn)得跟inline-block元素的特性一樣，
支持高寬，垂直margin和padding等，所以div class的所有樣式可以用在這個(gè)display inline的元素上。
IE6中浮動(dòng)元素3px間隔Bug:
發(fā)生場(chǎng)合:發(fā)生在一個(gè)元素浮動(dòng)，然后一個(gè)不浮動(dòng)的元素自然上浮與之靠近會(huì)出現(xiàn)的3px的bug。
解決方法:右邊元素也一起浮動(dòng);
或者為右邊元素添加IE6 Hack _margin-left:-3px;
從而消除3px間距。
原理分析:IE6瀏覽器缺陷Bug。
IE6/7負(fù)margin隱藏Bug:
發(fā)生場(chǎng)合:當(dāng)給一個(gè)有hasLayout的父元素內(nèi)的非hasLayout元素設(shè)置負(fù)marin時(shí)，超出父元素部分不可見(jiàn)。
解決方法:去掉父元素的hasLayout;
或者賦hasLayout給子元素,并添加position:relative;
原理分析:iE6/7獨(dú)有的hasLayout產(chǎn)生問(wèn)題。
IE6/7下ul/ol標(biāo)記消失bug:
發(fā)生場(chǎng)合:當(dāng)ul/ol觸發(fā)了haslayout并且是在ul/ol上寫(xiě)margin-left，前面默認(rèn)的ul/ol標(biāo)記會(huì)消失。
解決方法:給li設(shè)置margin-left，而不是給ul/ol設(shè)置margin-left。
原理分析:IE6/7瀏覽器Bug
IE6/7下margin與absolute元素重疊bug:
發(fā)生場(chǎng)合:雙欄自適應(yīng)布局中，左側(cè)元素absolute絕對(duì)定位，右側(cè)的margin撐開(kāi)距離定位。
在IE6/7下左側(cè)應(yīng)用了absolute屬性的塊級(jí)元素與右邊的自適應(yīng)的文字內(nèi)容重疊。
解決方法:把左側(cè)塊級(jí)元素更改為內(nèi)聯(lián)元素，比如把div更換為span。
原理分析:這是由于IE6/IE7瀏覽器將inline水平標(biāo)簽元素和block水平的標(biāo)簽元素沒(méi)有加以區(qū)分一視同仁渲染了。
屬于IE6/7瀏覽器渲染Bug。
IE6/7/8下auto margin居中bug:
發(fā)生場(chǎng)合:給block元素設(shè)置margin auto無(wú)法居中
解決方法:出現(xiàn)這種bug的原因通常是沒(méi)有Doctype，然后觸發(fā)了ie的quirks mode，加上Doctype聲明就可以了。
在《打敗IE的葵花寶典》里給出的方法是給block元素添加一個(gè)width能夠解決，但根據(jù)本人親測(cè)，加 with此種方法是無(wú)效的，如果沒(méi)有Doctype即使給元素添加width也無(wú)法讓block元素居中。
原理分析:缺少Doctype聲明。
IE8下input[button | submit] 設(shè)置margin:auto無(wú)法居中
發(fā)生場(chǎng)合:ie8下，如果給像button這樣的標(biāo)簽(如button input[type="button"] input[type="submit"])設(shè)置{ display: block;
margin:0 auto;
}如果不設(shè)置寬度的話無(wú)法居中。
解決方法:可以給為input加上寬度
原理分析:IE8瀏覽器Bug。
IE8百分比padding垂直margin bug:
發(fā)生場(chǎng)合:當(dāng)父元素設(shè)置了百分比的padding，子元素有垂直的margin的時(shí)候，就好像父元素被設(shè)置了margin一樣。
解決方法:給父元素加一個(gè)overflow:hidden/auto。
原理分析:IE8瀏覽器Bug
【網(wǎng)頁(yè)設(shè)計(jì)中margin怎么用】相關(guān)文章：
計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)中圖形設(shè)計(jì)的運(yùn)用論文10-09
網(wǎng)頁(yè)設(shè)計(jì)心得12-24
網(wǎng)頁(yè)設(shè)計(jì)報(bào)告04-25
網(wǎng)頁(yè)設(shè)計(jì)總結(jié)10-05
網(wǎng)頁(yè)設(shè)計(jì)技巧10-06
網(wǎng)頁(yè)html設(shè)計(jì)心得12-22
網(wǎng)頁(yè)設(shè)計(jì)的實(shí)習(xí)報(bào)告11-25