TShopping

 找回密碼
 註冊
搜索
查看: 361|回復: 0

[教學] CSS padding 內距屬性與用法範例

[複製鏈接]
發表於 2014-12-8 09:37:38 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
透過 CSS padding 內距的設定,可以控制區域如 DIVspan 的內部距離,也可以控制 HTML 的表格內部距離(例如文字或圖片與邊框的距離),padding 本身就是內距的設定,padding 是不可以設定負值的唷!這點與 margin 不同。

CSS padding 基本語法範例
padding:上 右 下 左;

 

padding:上下 左右;


 

padding:上 左右 下;


 

padding:四個邊同樣値;


第一個範例我們給了四個値,分別是上內距、右內距、下內距與左內距,每個値必須用半形空白隔開,第二個範例我們只寫了兩個値,分別是上下內距(相同値)與左右內距(相同値)、第三個範例我們給了三個値,分別是上內距、左右內距與下內距,這樣寫的話左右內距會一樣,第四個範例是簡化的寫法,四個邊的內距都一樣。

CSS padding 實際範例
<div style="width:120px;height:120px;background-color:#D4E6F8;padding:15px 20px;">
 <div style="background-color:#FFC991;width:120px;height:120px;"></div>
</div>

這樣的寫法意思是上下內距都是 15px 而左右內距都是 20px,呈現結果如下

padding.png

範例的重點在於『padding:15px 20px;』這個部分,設定兩個 DIV 區塊的內距,藍色的 DIV 區塊內部有橘色的區塊,透過 padding 設定讓上下內距一樣,左右內距一樣,範例中的 background-color 是背景顏色,width 與 height 則是設定 DIV 區塊的寬度與高度。

CSS padding 的四個邊獨立寫法
  • padding-top:上方的內距
  • padding-right:右方的內距
  • padding-bottom:下方的內距
  • padding-left:左方的內距
以上四個邊的屬性可以單獨使用,也可以混搭使用。

padding 可能的値
  • padding:auto; //代表讓瀏覽器自己去設定。
  • padding:長度單位; //就是給數字跟單位,單位可以是 em、px、pt 等値。
  • padding:%; //讓瀏覽器自己去設定,跟邊界元素有關。



 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-10 23:07 , Processed in 0.056859 second(s), 25 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表