HTML dl, dt, dd

HTML排版：定義清單之dl, dt, dd
定義清單是什麼？它跟ol, ul有什麼不一樣？dl, dt, dl 這三個標籤形影不離，卻又少人知道，但是它卻很好用！
前兩篇提到ol, ul 與 li，這個有無序號清單的玩意，與dl, dt, dd最大不同的地方在於，ol, ul, li 列出的清單只有條列式，而dl, dt, dd 稱為定義清單是因為同時有清單排列的模式，同時也附上說明，就好像左邊寫：一、xxxxxxxx，右邊寫xxxxxxxx是什麼xxxxxxxxx。項目名稱與項目說明同時存在，不再只是單純的條列清單。點我看範例！
範例一當中是平常狀態，在沒有任何其他設定時的模樣。或許你會很好奇，為什麼它自己會隔開，那麼請看範例二，範例二我設定了dl的邊框，每個dl的間距都有預設值，使你排列的時候不用刻意再做邊距設定，很多元素本身就有不同的 margin 邊距值 與 padding 內距值，如果仔細看，其實之前的ol, ul 範例也有。我們再看看範例三，範例三設定了 dt 與 dd 的邊框，讓你明白看見為什麼它們倆會一左一右，dd 因為margin-left的關係所以排列的時候會被往右推。
以下為使用dl, dt, dd如範例一的原始碼：

dt 清單項目‧壹

dd 清單說明‧壹

先使用dl標籤分別包住 dt 與 dd，一般來說dt在上，dd在下，原因是因為水平閱讀是由左至右，清單項目在前，清單說明在後。當然，你高興的話可以顛倒。
在這裡順便說明margin, padding 以及 border 的簡單觀念：margin 稱為邊距或是間距，元素邊框以外的距離；padding 稱為內距，內容與邊框之間的距離；border 則是邊框，處於margin 與 padding 之間。所以當我們看到範例三的 dd 邊框左邊空了一塊，是因為dd 的 左邊 margin 值的關係，而讓瀏覽網頁的人以為是一左一右。