搜尋

HTML 尺寸單位

HTML 裡有許多表示尺寸的單位,例如 px、pt、em、rem、%,有些時候甚至必須搭配特定的單位才能做出特定的效果,這篇教學會介紹 HTML 裡的尺寸單位。

快速導覽:

「網頁」和「印刷」的單位

HTML 支援許多不同的單位,單位的類型可以簡單分成「網頁」和「印刷」兩大類,通常對於 HTML 和 CSS 只會應用到網頁的樣式,列印網頁時的印刷單位大多是輔助使用,畢竟真正要做印刷,還是建議使用排版軟體來進行設計,下方列出 HTML 所支援的網頁和印刷單位。

網頁中常使用的單位

網頁中常使用的單位有四種,分別是 px、em、rem 和 %。

  • px:絕對單位,代表螢幕中每個「」( pixel )。
  • em:相對單位,每個子元素透過「倍數」乘以父元素「文字尺寸」的 px 值。
  • rem:相對單位,每個元素透過「倍數」乘以根元素「文字尺寸」的 px 值。
  • %:相對單位,每個子元素透過「百分比」乘以父元素的 px 值。

下方的網頁開啟後,網頁裡會有兩個 200px x 200px 的 div,div 裡都有一張皮卡丘圖片 ( 圖片來源 ),第一張的寬度設定為 100%,呈現出來就會是 200px ( 200 x 100% ),第二張圖片則直接指定 100px,呈現出來的寬度就會是 100px ( 如果只有指定圖片的寬度或高度,則另外一邊未指定的寬度或高度會自動調整 )。

<style>
  div{
    border:1px solid #000;
    width:200px;
    height:200px;
  }
</style>
<div>
  <img style="width:100%;" src="https://tw.portal-pokemon.com/play/resources/pokedex/img/pm/2b3f6ff00db7a1efae21d85cfb8995eaff2da8d8.png">
</div>
<div>
  <img style="width:100px;" src="https://tw.portal-pokemon.com/play/resources/pokedex/img/pm/2b3f6ff00db7a1efae21d85cfb8995eaff2da8d8.png">
</div>

HTML 教學 - HTML 尺寸單位 - 網頁中常使用的單位

如果將圖片的寬度單位設定為 em,則會以父元素 ( div ) 裡「文字大小」作為基底乘以指定的倍數,1em 就是 40px ( 40px x 1 ),5em 則是 200px ( 40px x 5 )。

<style>
  div{
    border:1px solid #000;
    width:200px;
    height:200px;
    font-size:40px;
  }
</style>
<div>
  <img style="width:1em;" src="https://tw.portal-pokemon.com/play/resources/pokedex/img/pm/2b3f6ff00db7a1efae21d85cfb8995eaff2da8d8.png">
</div>
<div>
  <img style="width:5em;" src="https://tw.portal-pokemon.com/play/resources/pokedex/img/pm/2b3f6ff00db7a1efae21d85cfb8995eaff2da8d8.png">
</div>

HTML 教學 - HTML 尺寸單位 - 網頁中常使用的單位 - em

網頁文字專屬單位

如果是針對網頁裡的「文字」,也可以直接使用專屬的「名稱」作為單位。

  • medium:預設值,等於 16px ( h4 預設值 )
  • xx-small:medium 的 0.6 倍 ( h6 預設值 )
  • x-small:medium 的 0.75 倍
  • small:medium 的 0.8 倍 ( h5 預設值,W3C 定義為 0.89,實測約為 0.8 )
  • large:medium 的 1.1 倍 ( h3 預設值,W3C 定義為 1.2,實測約為 1.1 )
  • x-large:medium 的 1.5 倍 ( h2 預設值 )
  • xx-large:medium 的 2 倍 ( h1 預設值 )
  • smaller:約為父層的 80%
  • larger:約為父層的 120%
<h2 style="font-size:medium">medium</h2>
<h2 style="font-size:xx-small">xx-small</h2>
<h2 style="font-size:small">small</h2>
<h2 style="font-size:xx-large">xx-large</h2>
<h2 style="font-size:x-large">x-large</h2>

HTML 教學 - HTML 尺寸單位 - 網頁中常使用的單位 - 網頁文字專屬單位

印刷單位

通常印刷單位在 HTML 裡比較少用 ( 因為轉換成 px 時常有小數點和四捨五入,不容易處理 ),除非該網頁有經過特別設計,在印刷時會另外套用印刷樣式,才會使用相關印刷單位。

  • pt:印表機的每個「點」,定義為 1 pt = 1/72 in,如果在 72 dpi 的系統上 1 px = 1 pt,但如果在 96 dpi 的系統上 1 px = 0.75 pt ( 72/96 = 0.75 )。
  • in:英吋,在 96 dpi 的系統上 1 in = 96 px。
  • cm:公分,在 96 dpi 的系統上 1 cm = 37.795275593333 px。
  • mm:公釐,在 96 dpi 的系統上 1 cm = 3.7795275593333 px。

小結

使用 HTML 單位時,最常用的就是 px、em、rem 和 % 四種,只要掌握彼此的相對關係,使用起來就能得心應手,更多相關資訊可以參考:一次搞懂 CSS 字體單位:px、em、rem 和 %

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片