測試·文章、章節與內容的邊界調整

提示:下方淺灰色區塊是文章章節的範例,建議使用瀏覽器的「元件檢閱器」來査閱各種群組元素在不同情境下的樣式。亦可伸縮視窗寬度來觀看專為行動裝置提供的彈性設計responsive web design,行動裝置預設為480px以下的視窗或設備。

文章標題(一級)

段落,也許是前言。上邊界對一級標題收緊。文章區塊的行高大於全域行高,預設為1.7em。

二級標題

這是一個段落,可以是對二級標題的內容詳述,上邊界對二級標題收緊。

這是另一個段落,可見上邊界不收緊了。

段落、清單、引用區塊等群組元素對標題的收緊

三級標題

這是一個引用區塊段落,可見上邊界對標題收緊;而三級標題則對二級標題收緊。

這是第二個引用區塊段落,可見上邊界不收緊了。

在文章中的引用區塊,會縮進二個字元(行動裝置上縮進一字元),並使用楷體。

三級標題

  1. 這是一個有序清單,
  2. 可見上邊界對標題收緊。
  1. 這是另一個有序清單,
  2. 可見上邊界不收緊了。

三級標題

  • 這是一個無序清單,
  • 可見上邊界對標題收緊。

詩,與標題收緊規則

總結成,琅琅上口:

上方描述規則的區塊是一個套用類詩篇類別.poem-like的分塊元素div在任意情境下,其後代段落元素p縮進二字元;在行動裝置中,縮進一字元。

六級標題
五級標題

四級標題

三級標題

二級標題

二級標題

三級標題

四級標題

五級標題
六級標題

一級標題

一級標題

一級標題不會互相收緊。

後代章節元素不影響群組收緊

後代章節元素section不會影響各個群組元素對上級標題的收緊。

比如說……

二級標題(在section下)

二級標題(在section下)

三級標題(在section下)

四級標題(在section下)

這是一個放在後代章節元素section中的段落,雖然和四級標題並非同輩,但仍然會對標題收緊。

四級標題(在section下)

五級標題(在section下)
六級標題(在section下)

同輩章節元素則否

互為「同輩」的二個章節元素下的標題則不互相收緊。

二級標題(section甲)

二級標題(section乙,與甲同輩)

三級標題(section丙,與甲乙同輩)

四級標題(section丁,與甲乙丙同輩)

五級標題(section戊,與甲乙丙丁同輩)
六級標題(section己,與甲乙丙丁戊同輩)

這是一個段落,屬於section庚,與甲乙丙丁戊己同輩。