CSS 高度和寬度

此元素的寬度為 100％。

CSS 設置高度和寬度

height 和 width 屬性用于設置元素的高度和寬度。

height 和 width 屬性不包括內邊距、邊框或外邊距。它設置的是元素內邊距、邊框以及外邊距內的區域的高度或寬度。

CSS 高度和寬度值

height 和 width 屬性可設置如下值：

  • auto - 默認。瀏覽器計算高度和寬度。
  • length - 以 px、cm 等定義高度/寬度。
  • % - 以包含塊的百分比定義高度/寬度。
  • initial - 將高度/寬度設置為默認值。
  • inherit - 從其父值繼承高度/寬度。

CSS 高度和寬度實例

此元素的高度為 200 像素，寬度為 50％

實例

設置 <div> 元素的高度和寬度：

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

親自試一試

此元素的高度為 100 像素，寬度為 500 像素。

實例

設置另一個 <div> 元素的高度和寬度：

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

親自試一試

注意：請記住，height 和 width 屬性不包括內邊距、邊框或外邊距！它們設置的是元素的內邊距、邊框和外邊距內的區域的高度/寬度！

設置 max-width

max-width 屬性用于設置元素的最大寬度。

可以用長度值（例如 px、cm 等）或包含塊的百分比（％）來指定 max-width（最大寬度），也可以將其設置為 none（默認值。意味著沒有最大寬度）。

當瀏覽器窗口小于元素的寬度（500px）時，會發生之前那個 <div> 的問題。然后，瀏覽器會將水平滾動條添加到頁面。

在這種情況下，使用 max-width 能夠改善瀏覽器對小窗口的處理。

提示：將瀏覽器窗口拖動到小于500px的寬度，以查看兩個 div 之間的區別！

此元素的高度為 100 像素，最大寬度為 500 像素。

此元素的高度為 100 像素，最大寬度為 500 像素。

注釋：max-width 屬性的值將覆蓋 width（寬度）。

實例

這個 <div> 元素的高度為 100 像素，最大寬度為 500 像素：

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

親自試一試

更多實例

設置元素的高度和寬度
本例演示如何設置不同元素的高度和寬度。
使用百分比設置圖像的高度和寬度
本例演示如何使用百分比值設置圖像的高度和寬度。
設置元素的最小寬度和最大寬度
本例演示如何使用像素值設置元素的最小寬度和最大寬度。
設置元素的最小高度和最大高度
本例演示如何使用像素值設置元素的最小高度和最大高度。

設置 CSS 尺寸屬性

屬性 描述
height 設置元素的高度。
max-height 設置元素的最大高度。
max-width 設置元素的最大寬度。
min-height 設置元素的最小高度。
min-width 設置元素的最小寬度。
width 設置元素的寬度。