<length-percentage>

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

<length-percentage> CSS 資料型別表示一個可以是 <length> 也可以是 <percentage> 的值。

語法

有關此型別允許的各個語法的詳細資訊，請參閱 <length> 和 <percentage> 的文件。

正式語法

<length-percentage> = 
  <length>      |
  <percentage>

示例

length-percentage 示例

此示例演示了幾個使用 <length-percentage> 值的屬性。

HTML

html

<p>You can use percentages and lengths in so many places.</p>

CSS

css

p {
  /* length-percentage examples */
  width: 75%;
  height: 200px;
  margin: 3rem;
  padding: 1%;
  border-radius: 10px 10%;
  font-size: 250%;
  line-height: 1.5em;

  /* length examples */
  text-shadow: 1px 1px 1px red;
  border: 5px solid red;
  letter-spacing: 3px;

  /* percentage example */
  text-size-adjust: 20%;
}

結果

在 calc() 中使用

如果將 <length-percentage> 指定為允許的型別，這意味著百分比會解析為長度，因此可以在 calc() 表示式中使用。因此，以下所有值對於 width 都是可接受的

css

width: 200px;
width: 20%;
width: calc(100% - 200px);

規範

規範
CSS 值和單位模組第 4 級 # 混合百分比

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者在 2025 年 10 月 10 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題