CSS 2.1 快速導覽 - 上邊界 margin-top

margin-top 性質 (property) 為 CSS 中用來設定區塊元素 (block element) 的上邊界 (margin) ,有以下的關鍵字 (keyword)

  • auto


margin-top 為區塊上面的邊界,另外還有左邊界 margin-left 、右邊界 margin-right 、下邊界 margin-bottom ,以及邊界的速記性質 margin 。


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

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


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

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


瀏覽器 (broswer) 開啟如下



由於此例中沒有設定邊距 (padding) ,因此黑色的邊框 (border) 緊緊包住圖片。


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


您可以繼續參考

JavaScript 範例

區塊相關


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


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

沒有留言: