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