固有尺寸

在 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 上查看此页面 • 报告此内容存在的问题