CSS height 屬性 · W3School CSS 參考手冊

# CSS height 屬性 ## 實例設置段落的高度和寬度： ``` p { height:100px; width:100px; } ``` ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有主流瀏覽器都支持 height 屬性。注釋：任何版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。 ## 定義和用法 height 屬性設置元素的高度。 ### 說明這個屬性定義元素內容區的高度，在內容區外面可以增加內邊距、邊框和外邊距。行內非替換元素會忽略這個屬性。 | 默認值： | auto | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS1 | | --- | --- | | JavaScript 語法： | _object_.style.height="50px" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | auto | 默認。瀏覽器會計算出實際的高度。 | | _length_ | 使用 px、cm 等單位定義高度。 | | _%_ | 基于包含它的塊級對象的百分比高度。 | | inherit | 規定應該從父元素繼承 height 屬性的值。 | ## TIY 實例 [使用像素值設置圖像的高度](/tiy/t.asp?f=csse_dim_height) 本例演示如何使用像素值設置元素的高度。 ``` <html> <head> <style type="text/css"> img.normal { height: auto } img.big { height: 160px } img.small { height: 30px } </style> </head> <body> <img class="normal" src="/i/eg_smile.gif" /> <br /> <img class="big" src="/i/eg_smile.gif" /> <br /> <img class="small" src="/i/eg_smile.gif" /> </body> </html> ``` [使用百分比設置圖像的高度](/tiy/t.asp?f=csse_dim_height_percent) 本例演示如何使用百分比值來設置元素的高度。 ``` <html> <head> <style type="text/css"> img.normal { height: auto } img.big { height: 50% } img.small { height: 10% } </style> </head> <body> <img class="normal" src="/i/eg_smile.gif" /> <br /> <img class="big" src="/i/eg_smile.gif" /> <br /> <img class="small" src="/i/eg_smile.gif" /> </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 尺寸](/css/css_dimension.asp "CSS 尺寸 (Dimension)") CSS 教程：[CSS 框模型概述](/css/css_boxmodel.asp "CSS 框模型概述") CSS 參考手冊：[width 屬性](/cssref/pr_dim_width.asp "CSS width 屬性") HTML DOM 參考手冊：[height 屬性](/jsref/prop_style_height.asp "HTML DOM height 屬性")