這節主要介紹margin 和如何用瀏覽器檢視頁面的style
這個就是我們box style 效果圖 ，解釋如下：
500 x 300 是內容的大小，我們一般叫 content
綠色顯示的是 內容和盒子之間的padding值 ，上下左右已經標註了 。
黃色 是 邊框的值， 設定的都一樣 。
最外層是 margin值 ，盒子的邊距 。
我們發現個問題，就是 我沒有設定 邊距 ，怎麼 盒子到邊框的有空隙， 當我們不知道的時候就用這個檢視下如圖：
body 的部分 已經把 div 的盒子當作內容， body 沒有padding 和border ，
但是 他有個預設的 margin =8px ，這就是問題的所在。可在body 部分設定為margin=0就行了。
margin 和padding 一樣的設定方式。 這裡就簡單說下
margin 同樣也有四個 拆分， margin-left， margin-right， margin-top， margin-bottom，
但是margin 可以合起來分別設定，例如 margin：10px，20px，30px，40px ， 順序為順時針進行設定，上為開頭，
順序為： 上 右 下 左 進行設定 。
如何設定三個呢， 並代表什麼意思呢？
例子： margin：10px，20px，30px 意思就是 上10px ， 左右為20px ， 下邊為30px
如何設定兩個呢， 並代表什麼意思 呢？
例子 margin ：10px ，20px 意思是 上下為10px ， 左右為20px
同理推出 如果只有乙個就是 margin：10px ，代表 左右上下都是 10px。
我們設定如下 ：
margin:20px 200px 40px 60px;
效果圖：
margin 已經生效了 ，
margin 的坑，邊距合併的問題
下邊我們 再建立乙個盒子，看看邊距的問題
.box
.box2
注意：左右沒有這個問題 。
解決方法：
你直接可以利用這個特性
兩個盒子 只設定 margin-top ，margin-bottom 不設定
降元素浮動或者定位
margin：200px auto；
auto 的意思自動分配，只設定上下的邊距。
css盒子模型 前端系列 css盒子模型
1 盒子模型 下圖中可以看到，在設定width的時候，標準的盒子模型是不包括border和padding的，而在ie瀏覽器中是包括這兩項的。盒模型是有兩種標準的，乙個是標準模型，乙個是ie模型。標準模型中，盒模型的寬高只是內容 content 的寬高，預設正是w3c標準盒模型。而在ie模型中盒模型的...
前端應用 css 盒子模型 07
當子元素的尺寸超過父元素的尺寸時，需要設定父元素顯示溢位的子元素的方式，設定的方法是通過overflow屬性來設定。如圖 overflow的設定項 1 visible 預設值。內容不會被修剪，會呈現在元素框之外。2 hidden 內容會被修剪，並且其餘內容是不可見的。在父元素新增屬性 overflo...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...