回到電腦螢幕上的顯示，當你設計一個 <div> 區塊，裡面可能包含了圖片、文字甚至是另一個 div 區塊，比此間的距離是用 padding 來制定。
請看看這段語法
<div style="width:300px;height:100px;padding:10px;background-color:#ccc;">
<div style="width:300px;height:100px;background-color:#fff;"></div>
</div>
葡萄色的程式碼是內部的區塊，包在橘色的程式碼裡面，當我們在橘色的大區塊設計 padding:10px 這樣的值時，相當於小區塊與大區塊間每個邊的距離為 10px。
呈現結果就像這樣
裡面白色的部分寬度與高度分別為 300px 與 100px，而外部的區塊由於為了給小區塊一個 10px 的距離，所以四個邊各向外擴展了 10px 的距離，這個特性在設計上是一個很重要的小觀念，要注意避免設計出錯。詳細的 padding 用法介紹可以參考以下說明。
CSS padding 內距屬性與用法範例
http://www.wibibi.com/info.php?tid=111
CSS DIV 區塊標籤的使用教學
http://www.wibibi.com/info.php?tid=112
