檢視 Box Model 的原始碼

[[分類:HTML]]
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/W3C_box_model.svg/320px-W3C_box_model.svg.png' />
*padding(內距)：
*#控制區域如 DIV 、 span 、表格的內部距離(例如文字或圖片與邊框的距離)
*#不可以設定負值，這點與 margin 不同。
*#基本語法範例：<p><span style='border:dashed 1pt;padding:5pt;'>padding:上 右 下 左;</span>　<span style='border:dashed 1pt;padding:5pt;'>padding:上下 左右;</span>　<span style='border:dashed 1pt;padding:5pt;'>padding:上 左右 下;</span>　<span style='border:dashed 1pt;padding:5pt;'>padding:四個邊同樣値;</span></p>
*#padding:auto;：讓瀏覽器自己去設定
*#padding:%;：讓瀏覽器自己去設定，跟邊界元素有關。
*margin(邊沿)：
*#控制一個區域(例如 DIV 或 span)的外邊界距離，俗稱外距。
*#可以設定負値，會使得 margin 設定為負值的元素「疊」到另一個元素上(不過還是要視另一個元素所設定的邊界距離而定)。例如，我們將 A 區塊的 margin-bottom 設為 0 ， B 區塊的 margin-top 設為 -10px ，那麼 B 區塊的文字就會疊到 A 區塊的文字上。
*#基本語法範例：<p><span style='border:dashed 1pt;padding:5pt;'>margin:上 右 下 左;</span>　<span style='border:dashed 1pt;padding:5pt;'>margin:上下 左右;</span>　<span style='border:dashed 1pt;padding:5pt;'>margin:上 左右 下;</span>　<span style='border:dashed 1pt;padding:5pt;'>margin:四個邊同樣値;</span></p>
*#margin:auto;：讓瀏覽器自己去設定。
*#margin:%;：讓瀏覽器自己去設定，跟邊界元素有關。
*border(邊框)：
*#邊框粗細：用長度表達
*#邊框顏色：可以使用色標準色碼或顏色的英文名稱表達
*#邊框樣式：可以設定實線(solid)、虛線(dashed)、雙實線(double)、連續點(dotted)等：<table style='border:none;'><tr><td style='border:none;'><div style='border:1pt #000 solid;padding:10pt;'>border-style:solid;</div></td><td style='border:none;'><div style='border:1pt #000 dotted;padding:10pt;'>border-style:dotted;</div></td><td style='border:none;'><div style='border:1pt #000 dashed;padding:10pt;'>border-style:dashed;</div></td></tr><tr><td style='border:none;'><div style='border:3pt #000 double;padding:10pt;'>border-style:double;</div></td><td style='border:none;'><div style='border:5pt #000 outset;padding:10pt;'>border-style:outset;</div></td><td style='border:none;'><div style='border:5pt #000 groove;padding:10pt;'>border-style:groove;</div></td></tr><tr><td style='border:none;'><div style='border:5pt #000 ridge;padding:10pt;'>border-style:ridge;</div></td><td style='border:none;'><div style='border:5pt #000 inset;padding:10pt;'>border-style:inset;</div></td><td style='border:none;'><div style='border:5pt #000 none;padding:10pt;'>border-style:none;</div></td></tr></table>
*#<span style='position:relative;top:0.7em;border-top:5px double red;'><span style='position:relative;top:-0.7em;'>雙刪除線</span></span>：&lt;span style='position:relative;top:0.7em;border-top:5px double red;'&gt;&lt;span style='position:relative;top:-0.7em;'&gt;雙刪除線&lt;/span&gt;&lt;/span&gt;
*#*先用 position:relative; 讓元素「相對地」調整其原本該出現的所在位置。
*#*再用 top:0.7em; 在上方塞約半個字，使上框線下降約半個字
*#*最後增加一個字元素，用 top:0.7em; 讓字回到原來該有的位置。
*#*須要如此做的原因是因為 text-decoration: 樣式只能畫單刪除線，無法指示畫出雙刪除線。