CSS 內邊距與外邊距

標籤：class   color   width   c   html   htm   

寫項目的時候一直用到邊距，今天用了一下午的時間好好研究了一下邊距，發現CSS邊距並非那麼簡單。這裡就和大家分享一下：

一、內邊距

   如下面代碼

   html:

   <div class="test"><div>

   css:

    .test{

       width:100px;

       height:100px;

       background-color:#fbc;

       padding:10px 20px 30px 40px;

    }

這時候在這個div中會形成一個內容框它裡頂部邊框距離為10px，右邊20px,下邊30px,左邊40px，這個內容框應該是100*100（橫*豎）的框。他現在整個框應該為160*140。這個比較簡單。

二、外邊距

外邊距就比較有趣了

   html:

   <div class="test">

     <div class="test1"></div>

     <div class="test2"></div>

  <div>

   css:

    .test{

       width:100px;

       height:100px;

       background-color:#fbc;

       margin-top:10px;

    }

   .test1{

      width:20px;

      height:20px;

      background-color:blue;

      margin-top:10px;

  }

  

   .test2{

      width:20px;

      height:20px;

      background-color:red;

      margin-top:20px;

  }

這個時候大家覺得會有什麼樣的狀況，我和大家透露點這個時候div.test在他上邊框上會產生一個10px的外邊距；而div.test1上邊框和div.test上邊框重合，在它上邊框也會產生一個10px的外邊距，這個將於div.test上邊距重合，同樣的margin-bottom同樣也是這個原理。margin-top和margin-bottom邊距不會針對它父類div而產生邊距，而是會和它父類或同等級的外邊距進行重合，如果它們外邊距都為正數，則取最大值，若有一個為負，則正負相加得到最後值。

這個大家可以去試試！

另外margin-left會針對他父類或他同級產生邊距，將margin-left：10px,則這個元素裡父類左邊框距離為10px，而產生一個10px的邊距，而margin-right就完全沒有限制，只會影響同級元素，他可能會超過父類元素的寬度。同時，margin-left不存在上面重合的性質。