本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
===>>>本站推出學習遊戲意見調查<<<===《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

CSS 2.1 快速導覽 - 邊距 padding

padding 性質 (property) 為 CSS 中用來設定區塊元素 (block element) 邊距 (padding) 的速記性質,可直接設定上、下、左、右等邊界,可用百分比與數字設定。




有幾種情況
padding: 20px;              /* 上下左右皆 20px */
padding: 16px 20px;         /* 上下 16px ,左右 20px */
padding: 10px 30px 20px;    /* 上 10px ,左右 30px, 下 20px */
padding: 10px 3px 30px 5px; /* 依序圍上、右、下、左,順時針方向 */


舉例如下
.example {
    padding: 200px;
    border: thin solid black;
}

/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名:block14.css
    功能:示範 CSS 2.1 樣式表的使用 
    作者:張凱慶
    時間:西元 2011 年 7 月 */


我們以下面的 HTML 文件載入
<html>
<head>
<title>網頁標題</title>
<link rel="stylesheet" type="text/css" 
      href="block14.css">
</head>
<body>
<img class="example" src="example.jpg">
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     htt://pydoing.blogspot.com/
     檔名:block14.html
     功能:示範 CSS 2.1 樣式表的使用 
     作者:張凱慶
     時間:西元 2011 年 7 月 -->


瀏覽器 (broswer) 開啟如下



右下角的部份也可以看到有 200px 的邊界



此例中沒有設定邊界 (margin) ,因此黑色邊框 (border) 直抵瀏覽器的邊緣。


中英文術語對照
性質property
區塊元素block element
邊距padding
瀏覽器broswer
邊界margin
邊框border


您可以繼續參考

JavaScript 範例

區塊相關


相關目錄
CSS 2.1 快速導覽
HTML, CSS 教材
首頁


參考資料
http://www.w3.org/TR/CSS21/box.html
https://developer.mozilla.org/en/CSS/padding

沒有留言: