Deik Hoong: CSS display 屬性 display:block 與 display:inline

2012年4月4日星期三

display 是設計 CSS 版面配置中最重要的屬性，每個 HTML 元素都有一個預設的 display 值，不同的元素屬性會有不同的預設值。大部分元素的 display 屬性，預設值通常是 block 或 inline 其中一個

display:block 與 display:inline 的差異

範例：將 <h1> 透過 css 設定display：block屬性 (h1 標籤預設display 屬性也是 block)

HTML

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <h1>標題一</h1>
 <h1>標題二</h1>
</body>
</html>

CSS

h1{
 display: block;
}

顯示結果

範例二：將display:block 改成 dispaly:inline

CSS

h1{
 display: inline;
}

顯示結果

Deik Hoong