8000 csswg-drafts/css2/visudet.src at c00f733286855a1ab5ec6c34c9018a597c3a0701 · w3c/csswg-drafts · GitHub
Skip to content

visudet.src

Latest commit

 

History

History
1546 lines (1341 loc) · 63.5 KB

visudet.src

File metadata and controls

1546 lines (1341 loc) · 63.5 KB
<dd>Specifies the height of the content area using a length value.
</dd>
<dt><span class="index-inst" title="&lt;percentage&gt;"><span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></span>
</dt>
<dd>Specifies a percentage height. The percentage is calculated with
respect to the height of the generated box's <a
href="visuren.html#containing-block">containing block</a>. If the
height of the containing block is not specified explicitly (i.e., it
depends on content height), and this element is not absolutely
positioned, the value computes to 'auto'. A percentage height
on the <a href="conform.html#root">root element</a> is relative to the
<a href="#containing-block-details">initial containing block</a>.
<span class="note">
Note: For absolutely positioned elements whose containing block is
based on a block-level element, the percentage is calculated with
respect to the height of the <em>padding box</em> of that element.
This is a change from CSS1, where the percentage was always
calculated with respect to the <em>content box</em> of the parent
element.
</span>
</dd>
<dt><strong>auto</strong>
</dt>
<dd>The height depends on the values of other properties.
See the prose below.
</dd>
</dl>
<p class="note">Note that the height of the containing block of an
absolutely positioned element is independent of the size of the
element itself, and thus a percentage height on such an element can
always be resolved. However, it may be that the height is not known
until elements that come later in the document have been processed.
</p>
<p>Negative values for <span class="propinst-height">'height'</span>
are illegal.
</p>
<div class="example"><p>
For example, the following rule sets the content height of paragraphs
to 100 pixels:</p>
<pre>
p { height: 100px }
</pre>
<p>Paragraphs of which the height of the contents exceeds 100 pixels
will <a href="visufx.html#overflow">overflow</a> according to the
<span class="propinst-overflow">'overflow'</span> property.
</p>
</div>
<h2><a name="Computing_heights_and_margins">Calculating heights and
margins</a></h2>
<p>For calculating the values of <span class="propinst-top">'top'</span>, <span class="propinst-margin-top">'margin-top'</span>, <span class="propinst-height">'height'</span>,
<span class="propinst-margin-bottom">'margin-bottom'</span>, and <span class="propinst-bottom">'bottom'</span> a distinction must be made between
various kinds of boxes:
</p>
<ol>
<li>inline, non-replaced elements</li>
<li>inline, replaced elements</li>
<li>block-level, non-replaced elements in normal flow</li>
<li>block-level, replaced elements in normal flow</li>
<li>floating, non-replaced elements</li>
<li>floating, replaced elements</li>
<li>absolutely positioned, non-replaced elements</li>
<li>absolutely positioned, replaced elements</li>
<li>'inline-block', non-replaced elements in normal flow</li>
<li>'inline-block', replaced elements in normal flow</li>
</ol>
<p>For Points 1-6 and 9-10, the used values of 'top' and
'bottom' are determined by the rules in section 9.4.3.
</p>
<p class=note>Note: these rules apply to
the root element just as to any other element.
<p class=note><em><strong>Note.</strong> The used value of 'height'
calculated below is a tentative value, and may have to be calculated
multiple times, depending on <span
class="propinst-min-height">'min-height'</span> and <span
class="propinst-max-height">'max-height'</span>, see the section <a
href="#min-max-heights">Minimum and maximum heights</a> below.</em>
<h3><a name="inline-non-replaced">Inline, non-replaced elements</a></h3>
<p>The <span class="propinst-height">'height'</span> property does not
apply. The height of the content area should be based on the font, but
this specification does not specify how. A UA may, e.g., use the
em-box or the maximum ascender and descender of the font. (The latter
would ensure that glyphs with parts above or below the em-box still
fall within the content area, but leads to differently sized boxes for
different fonts; the former would ensure authors can control
background styling relative to the 'line-height', but leads to glyphs
painting outside their content area.)
</p>
<p class=note>Note: level 3 of CSS will probably include a property to
select which measure of the font is used for the content height.
</p>
<p>The vertical padding, border and margin of an inline, non-replaced
box start at the top and bottom of the content area, and has nothing
to do with the <span
class="propinst-line-height">'line-height'</span>. But only the <span
class="propinst-line-height">'line-height'</span> is used when calculating
the height of the line box.
</p>
<p><a name="multi-font-inline-height"></a> If more than one font is
used (this could happen when glyphs are found in different fonts), the
height of the content area is not defined by this specification.
However, we suggest that the height is chosen such that the content
area is just high enough for either (1) the em-boxes, or (2) the
maximum ascenders and descenders, of <em>all</em> the fonts in the
element. Note that this may be larger than any of the font sizes
involved, depending on the baseline alignment of the fonts.
</p>
<h3><a name="inline-replaced-height">Inline replaced elements</a>,
block-level replaced elements in normal flow, 'inline-block' replaced
elements in normal flow and floating replaced elements</h3>
<p>If <span class="propinst-margin-top">'margin-top'</span>, or <span
class="propinst-margin-bottom">'margin-bottom'</span> are 'auto',
their used value is 0.
<p>If <span class="propinst-height">'height'</span> and <span
class="propinst-width">'width'</span> both have computed values of
'auto' and the element also has an intrinsic height, then that
intrinsic height is the used value of <span
class="propinst-height">'height'</span>.
<p>Otherwise, if <span class="propinst-height">'height'</span> has a
computed value of 'auto', and the element has an intrinsic ratio then
the used value of <span class="propinst-height">'height'</span> is:
<blockquote><p>(used width) / (intrinsic ratio)</blockquote>
<p>Otherwise, if <span class="propinst-height">'height'</span> has a
computed value of 'auto', and the element has an intrinsic height,
then that intrinsic height is the used value of <span
class="propinst-height">'height'</span>.
<p>Otherwise, if <span class="propinst-height">'height'</span> has a
computed value of 'auto', but none of the conditions above are met,
then the used value of <span class="propinst-height">'height'</span>
must be set to the height of the largest rectangle that has a 2:1
ratio, has a height not greater than 150px, and has a width not
greater than the device width.
<!-- Issue 181: remove the following -->
<!-- <p>For 'inline' and 'inline-block' elements, the margin box is used
when calculating the height of the line box. -->
<!-- /Issue 181 -->
<h3><a name="normal-block">Block-level non-replaced elements in normal
flow when 'overflow' computes to 'visible'</a></h3>
<p>This section also applies to block-level non-replaced elements in
normal flow when 'overflow' does not compute to 'visible' but has been
propagated to the viewport.
<p>If <span
class="propinst-margin-top">'margin-top'</span>, or <span
class="propinst-margin-bottom">'margin-bottom'</span> are 'auto',
their used value is 0. If <span
class="propinst-height">'height'</span> is 'auto', the height depends
on whether the element has any block-level children and whether it has
padding or borders:
</p>
<p>The element's height is the distance from its top content edge to
the first applicable of the following:
<ol>
<li>the bottom edge of the last line box, if the box establishes a
inline formatting context with one or more lines
<li>the bottom edge of the bottom (possibly collapsed) margin of its
last in-flow child, if the child's bottom margin does not collapse
with the element's bottom margin
<li>the bottom border edge of the last in-flow child whose top
margin doesn't collapse with the element's bottom margin
<li>zero, otherwise
</ol>
<p>Only children in the normal flow are taken into account (i.e.,
floating boxes and absolutely positioned boxes are ignored, and
relatively positioned boxes are considered without their offset). Note
that the child box may be an <a
href="visuren.html#anonymous-block-level">anonymous block box.</a>
</p>
View remainder of file in raw view