牆壁彩繪 / Lin.mo 里莫彩繪事務所 , 藝術設計,

前端基礎分享

CSS padding & CSS margin 內外距的分別

對於初學者來說, padding & margin  是種非常容易搞混的屬性 , 

簡單來說 padding 是屬於框架的內距 , margin 是屬於框架的外距

例如: padding 是這樣:

padding是往框架內縮距離,而它的屬性共分五種方式

padding-top:20px; //只針對上距

padding-left:20px; //只針對左距

padding-right:20px; //只針對右距

padding-bottom:20px; //只針對下距

當然你也可以這樣寫: 
padding:10px 10px 10px 10px; // 依序為 上右下左

padding:10px 0; // 上下為10px 左右為0

padding:0 10px; // 上下為0px 左右為10px

 margin 是這樣 :

margin是往框架外拉遠距離 ,

margin-top:20px; //只針對上距

margin-left:20px; //只針對左距

margin-right:20px; //只針對右距

margin-bottom:20px; //只針對下距

你也可以這樣寫: 
margin:10px 10px 10px 10px; // 依序為 上右下左

margin:10px 0; // 上下為10px 左右為0

margin:0 10px; // 上下為0px 左右為10px

如果兩者在一個實際的區塊框架的應用上會是像這樣 
 

當然你不可能將樣式寫在html標籤裡面, 原生html & css的寫法會是

html

<div class="box">
  <div class="li">
    <strong>框架</strong>
    <p>這裡是框架的內容</p> 
  </div>
  <div class="li">
    <strong>框架</strong>
    <p>這裡是框架的內容</p> 
  </div>
  <div class="li">
    <strong>框架</strong>
    <p>這裡是框架的內容</p> 
  </div>  
</div>
 

Css

<style>
  .box {
    background: #eee;
    padding: 20px;
  }
  .box .li {
    background: #fff;
    padding: 20px; 
    margin-bottom:20px; 
  }
  .box .li:nth-last-child(1) {
    margin-bottom:0; /*最後一個的下方外距必須是0*/
  }  
 

Scss

  .box {
    background: #eee;
    padding: 20px;
    .li {
      background: #fff;
      padding: 20px; 
      margin-bottom:20px; 
      &:nth-last-child(1) {
        margin-bottom:0; /*最後一個的下方外距必須是0*/
      }  
    }    
  }

以上作為 CSS padding & CSS margin 分享!

里莫彩繪事務所紛絲團

奈思創藝網頁設計

奈思創藝網頁設計紛絲團