固有尺寸

在 CSS 中，元素的固有尺寸是純粹根據其內容計算出的尺寸，不考慮其所處的佈局環境的影響。這與元素的外部尺寸相反，外部尺寸由容器大小等外部約束決定。元素的固有尺寸由其min-content和max-content尺寸表示。

行內元素是固有尺寸的。CSS 盒模型屬性，如height、width、block-size、inline-size、padding-block和margin-block對它們的佈局沒有影響（儘管margin-inline和padding-inline確實會影響行內間距）。

例如，行內<span>元素的最小固有尺寸是它在inline-size: 0的容器中浮動（沒有應用其他 CSS 盒屬性）時所能達到的最小尺寸。最大固有尺寸則相反；它是相同的<span>在inline-size無限的容器中時所能達到的尺寸。

固有尺寸對於影像和文字具有相同的含義——如果未應用任何 CSS 來更改渲染，影像將以該尺寸顯示。

畫素密度和解析度會影響固有尺寸。預設情況下，影像被假定為具有“1x”畫素密度（1 裝置畫素 = 1 CSS 畫素），在這種情況下，固有尺寸就是畫素高度和寬度。影像的固有尺寸和解析度可以在其EXIF資料中明確指定。影像畫素密度也可以使用srcset屬性為影像設定。請注意，如果同時使用這兩種機制，srcset值將“覆蓋”EXIF 值。

固有尺寸及其計算方式在CSS 盒模型模組中定義。

最小固有尺寸

要根據元素的最小固有尺寸設定元素，請將inline-size（或在水平書寫模式下，如英語和希伯來語中為width）設定為min-content。這會將元素設定為在內聯方向上儘可能小地包裹文字而不導致溢位，並儘可能多地進行軟換行時的尺寸。對於包含文字字串的框，最小固有尺寸將由最長的單詞定義。

<p>Text wraps, making the element only as wide as its longest word.</p>

css

p {
  inline-size: min-content;
  background-color: palegoldenrod;
}

最大固有尺寸

最大固有尺寸則相反。它是當容器的內聯尺寸無限大時元素的尺寸。文字內容將盡可能寬地顯示，沒有軟換行，即使它溢位其容器。關鍵字值max-content設定此行為。

<p>Element grows as text doesn't wrap.</p>
<p>
  This paragraph may be wider than the width of the entire page and yet it won't
  wrap because <code>width: max-content</code> is set. It therefore may overflow
  its container.
</p>

css

p {
  width: max-content;
  background-color: palegoldenrod;
}

另見

相關詞彙表術語
- 外在尺寸
CSS min-content、max-content和fit-content尺寸關鍵字
interpolate-size
aspect-ratio
calc-size()
CSS 盒模型尺寸模組
CSS 盒模型第三級規範

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於2025 年 8 月 28 日，由MDN 貢獻者完成。

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