margin 0padding 0是什么意思呀？誰(shuí)告訴哦 頁(yè)面中所有元素的外間距 和 內(nèi)間距 都為0 * 就表示頁(yè)面內(nèi)的所有元素，如 ，body，table，div 等等 請(qǐng)教大師，bodymargin0padding0是什么意思？ 不是左右分開的 是標(biāo)簽選擇器讓總的外框的外邊距和內(nèi)邊距為0css程式碼中padding1em；可以使用CSS margin 屬性，控制兩個(gè)div的距離 定義和用法 margin 簡(jiǎn)寫屬性在一個(gè)聲明中設(shè)置所有外邊距屬性該屬性可以有 1 到 4 個(gè)值說(shuō)明 這個(gè)簡(jiǎn)寫屬性設(shè)置一個(gè)元素所有外邊距的寬度，或者設(shè)置各邊上外邊距的寬度塊級(jí)元素的垂直相鄰?fù)膺吘鄷?huì)合并，而行內(nèi)元素實(shí)際上不占上下外邊距行內(nèi)元素的的。

3新建一個(gè)html文件，命名為testhtml，用于講解div+css布局的基本流程在testhtml文件內(nèi)，對(duì)body進(jìn)行樣式初始化，設(shè)置外邊距margin為0，內(nèi)邊距padding為0，同時(shí)使用textalign設(shè)置文字居中4div+css布局現(xiàn)在是主流，能提高網(wǎng)頁(yè)加載速度，提高后期代碼維護(hù)效率步驟閱讀方法步驟01div所謂div標(biāo)簽我們；如上圖，A，B兩個(gè)方框，A代碼padding，B代表margin，現(xiàn)在我們看A箭頭與藍(lán)色邊框的距離，這就是padding叫做內(nèi)邊距，下面再來(lái)看看B外面的箭頭與B之前的距離就是我們所說(shuō)的margin的，叫做外間距，哈哈你現(xiàn)在應(yīng)該明白了，什么是padding，什么是margin吧呵呵 事例二看看css盒模型，下圖margin是 DIV與周邊元素的；CSS 外邊距屬性 屬性 描述 margin 簡(jiǎn)寫屬性在一個(gè)聲明中設(shè)置所有外邊距屬性 marginbottom 設(shè)置元素的下外邊距 marginleft 設(shè)置元素的左外邊距 marginright 設(shè)置元素的右外邊距 margintop 設(shè)置元素的上外邊距 外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距 合并后的外；元素之間的邊距可以使用margin來(lái)實(shí)現(xiàn) margintop#160right#160bottom#160left#160*分別為上右下左邊距* 這屬于CSS 框模型 Box Model 規(guī)定了元素框處理元素內(nèi)容內(nèi)邊距邊框 和 外邊距 的方式 圍繞在元素邊框的空白區(qū)域是外邊距，設(shè)置外邊距會(huì)在元素外創(chuàng)建額外的“空白”。

需要準(zhǔn)備的材料分別有電腦瀏覽器html編輯器1首先，打開html編輯器，新建html文件，例如indexhtml2在indexhtml中的ltstyle標(biāo)簽中，輸入css代碼submargintop 30px3瀏覽器運(yùn)行indexhtml頁(yè)面，此時(shí)3個(gè)div子子容器的垂直間距被統(tǒng)一設(shè)置為了30px；如上圖所示，DIV是一個(gè)盒模型，padding內(nèi)邊距是計(jì)算在整個(gè)盒子的大小的但是margin是外邊距，并不計(jì)入DIV的大小。

divwidth 100px height 40px border 1px solid red display inlineblock*將三個(gè)div都設(shè)置為行內(nèi)塊元素，這樣div就既保留了塊的樣式，又能體現(xiàn)為文本的在一行中顯示的樣式* box2margin 0px 10px*將中間那個(gè)div的兩邊邊距都設(shè)置為10px，就達(dá)到了中間間隔為10px的效果*；這個(gè)說(shuō)實(shí)話沒有什么先后關(guān)系的，完全是按照自己的喜好來(lái)，如果你害怕盒模型會(huì)因?yàn)樵O(shè)計(jì)了內(nèi)邊距和邊框是的內(nèi)容發(fā)生錯(cuò)位而要重新計(jì)算盒子的大小時(shí)你可以給這個(gè)盒子加一個(gè)屬性，boxsizingborderbox；垂直外邊距合并問題常見于第一個(gè)子元素的margintop會(huì)頂開父元素與父元素相鄰元素的間距，而且只在標(biāo)準(zhǔn)瀏覽器下 FirfFoxChromeOperaSarfi產(chǎn)生問題，IE下反而表現(xiàn)良好這個(gè)問題發(fā)生的原因是根據(jù)規(guī)范，一個(gè)盒子如果沒有上補(bǔ)白paddingtop和上邊框bordertop，那么這個(gè)盒子的上邊距會(huì)和其內(nèi)部；設(shè)置邊距之外，還需要設(shè)置先邊框線的寬度的，否則還是有寬度的需要設(shè)置marginpadding的寬度都是0像素， 舉例ltdiv style =quotmargin0px padding0px width100%height100%quotltdiv此時(shí)就可以把邊距變?yōu)?，也就不會(huì)顯示的很寬了；ltstyle type=quottextcssquot margin 0padding 0 bodywidth1012px div width 300pxheight 300pxborder 2px solid #333bordersizingborderbox*將邊框設(shè)置為內(nèi)邊框 這樣就不影響元素的寬度和高度，這樣正好右列二到頁(yè)面左邊距正好是700px ，沒有這個(gè)屬性的話是708px*。

第一段下邊距 15px + 第二段上邊距 15px = 30px 加起來(lái)等于 30px 對(duì)不等于 30px 的話排版就難看了實(shí)際上瀏覽器為了解決這個(gè)排版問題，把這兩個(gè)邊距強(qiáng)制合并了而不是簡(jiǎn)單的做加法運(yùn)算，實(shí)際上下兩段之間距離是15px 這個(gè)就是外邊距自動(dòng)合并，是一個(gè)很有用的功能，基本上能解析 css；3然后是使用margin外邊距，這也是常用的方法，可以設(shè)置上下左右邊距，這里使用float將兩個(gè)子div并列4這個(gè)方法也是margin方法，當(dāng)時(shí)是使用displayinlineblock來(lái)將兩個(gè)div并列，需要注意的是這里會(huì)產(chǎn)生邊距5最后這個(gè)是使用padding內(nèi)邊距，需要有內(nèi)容的情況下或者在子div中里面加入div以顯示效果。