内在尺寸

在 CSS 中，元素的内在尺寸是指仅基于其内容的尺寸，而不考虑其所处上下文的的影响。例如，由 CSS 盒模型属性应用的大小。元素的内在尺寸由其min-content和max-content尺寸表示。

内联元素的大小是内在的：大小和盒属性，包括height、width、block-size、inline-size以及padding-block和margin-block对它们没有影响（尽管margin-inline和padding-inline有影响）。

例如，内联<span>元素的最小内在尺寸是在浮动（未应用其他 CSS 盒属性）的情况下，在内联大小为0px的容器内部它将具有的最小尺寸。最大内在尺寸则相反。如果其容器的内联大小是无限的，则为相同<span>将具有的尺寸。

对于图像，内在尺寸与文本的含义相同——如果未应用任何 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>

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>

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