使用 <pre> 和 CSS，打造網頁中放置原始碼的方框

原始碼中所有的換行、空格、TAB，在 HTML 的解析中都只當作為一個空格，除非使用 <pre> 標籤，才能夠將原始碼中的換行、空格、TAB 等得以保留。

此乃放置原始碼的方框，其中的原始碼為套用至本方框所用 <pre> 標籤之 CSS 原始碼。方框顏色參考英文維基百科中放置 CSS 原始碼之方框的顏色。

pre {
        margin: 0;
        padding: 1em;
        border: 1px dashed #2f6fab;
        background-color: #f9f9f9;
        color: black;
        line-height: 1.4em;
        font-family: verdana, helvetica, sans-serif;
}

margin: 0
取消 <pre> 上邊和下邊留有的 margin。偶通常是在原始碼說明的下方緊貼原始碼方框，有時會在原始碼方框下方緊跟一段簡短補充。原始碼方框下方需要留空白的話就使用一個 <br />。

padding: 1em
<pre> 預設沒有 padding，原始碼內容會緊貼著方框的 border。為了美觀，令原始碼內容同方框各邊 border 之間留有一定的距離，在這邊偶指定為留有 1em 的 padding。

border: 1px dashed #2f6fab
指定四個邊的 border 以將原始碼內容同文章內文隔開，border 寬度使用 1px 即一個像素即可；dashed 表示 border 為虛線；#2f6fab 指定 border 顏色為 #2f6fab。

background-color: #f9f9f9
指定原始碼方框的背景顏色為 #f9f9f9。

color: black
如果網頁的預設文字顏色不是黑色，就需要特別指定原始碼方框中原始碼的文字顏色為黑色，因為黑色同原始碼方框的背景顏色搭配，其他顏色不一定搭配。

line-height: 1.4em
指定原始碼方框中原始碼相鄰兩行之間的距離，距離過大或過小看上去都不美觀。可以先不指定 line-height 看預設效果如何，不滿意再加以調整。

font-family: verdana, helvetica, sans-serif
指定原始碼方框中原始碼的文字使用英文字型，因為原始碼基本上沒有中文，網頁預設的中文字型顯示英文的效果不及英文字型。原始碼中的中文會自動使用中文字型。一次多指定幾個常用不錯看的英文字型，優先使用所指定字型中的第一個。若訪客的作業系統中沒有第一個字型，則會使用第二個，依此類推；若這些字型都沒有則會使用訪客於瀏覽器中指定的預設字型。