The used value of 'height' calculated below is a tentative value, and may have to be calculated multiple times, depending on 'min-height' and 'max-height' , see the section Minimum and maximum heights below.
The height of the content area should be based on the font, but this specification does not specify how. A UA may, e. 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.
Note: level 3 of CSS will probably include a property to select which measure of the font is used for the content height. 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 'line-height'. But only the 'line-height' is used when calculating the height of the line box.
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 all 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. If 'margin-top' , or 'margin-bottom' are 'auto', their used value is 0. If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic height, then that intrinsic height is the used value of 'height'.
Otherwise, if 'height' has a computed value of 'auto', but none of the conditions above are met, then the used value of 'height' must be set to the height of the largest rectangle that has a ratio, has a height not greater than px, and has a width not greater than the device width. If 'height' is 'auto', the height depends on whether the element has any block-level children and whether it has padding or borders:.
The element's height is the distance from its top content edge to the first applicable of the following: the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines 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 the bottom border edge of the last in-flow child whose top margin doesn't collapse with the element's bottom margin zero, otherwise Only children in the normal flow are taken into account i.
Note that the child box may be an anonymous block box. More precisely, the static position for 'top' is the distance from the top edge of the containing block to the top margin edge of a hypothetical box that would have been the first box of the element if its specified 'position' value had been 'static' and its specified 'float' had been 'none' and its specified 'clear' had been 'none'.
Note that due to the rules in section 9. The value is negative if the hypothetical box is above the containing block. For the purposes of calculating the static position, the containing block of fixed positioned elements is the initial containing block instead of the viewport.
For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint:. If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below. If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values.
If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value. This situation is similar to the previous one, except that the element has an intrinsic height.
The sequence of substitutions is now:. This section applies to: Block-level, non-replaced elements in normal flow when 'overflow' does not compute to 'visible' except if the 'overflow' property's value has been propagated to the viewport.
Floating, non-replaced elements. If 'height' is 'auto', the height depends on the element's descendants per For 'inline-block' elements, the margin box is used when calculating the height of the line box. If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box. Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset.
In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.
It is sometimes useful to constrain the height of elements to a certain range. Two properties offer this functionality:. These two properties allow authors to constrain box heights to a certain range. Negative values for 'min-height' and 'max-height' are illegal. The following algorithm describes how the two properties influence the used value of the 'height' property:.
These steps do not affect the real computed values of the above properties. The change of used 'height' has no effect on margin collapsing except as specifically required by rules for 'min-height' or 'max-height' in "Collapsing margins" 8.
However, for replaced elements with both 'width' and 'height' computed as 'auto', use the algorithm under Minimum and maximum widths above to find the used width and height. Then apply the rules under "Computing heights and margins" above, using the resulting width and height as if they were the computed values.
As described in the section on inline formatting contexts , user agents flow inline-level boxes into a vertical stack of line boxes. The height of a line box is determined as follows:.
Empty inline elements generate empty inline boxes, but these boxes still have margins, padding, borders and a line height, and thus influence these calculations just like elements with content.
CSS assumes that every font has font metrics that specify a characteristic height above the baseline and a depth below it. In this section we use A to mean that height for a given font at a given size and D the depth. Note that these are metrics of the font as a whole and need not correspond to the ascender and descender of any individual glyph.
User agent must align the glyphs in a non-replaced inline box to each other by their relevant baselines. Then, for each glyph, determine the A and D.
Note that glyphs in a single element may come from different fonts and thus need not all have the same A and D. If the inline box contains no glyphs at all, it is considered to contain a strut an invisible glyph of zero width with the A and D of the element's first available font. L may be negative. The height of the inline box encloses all glyphs and their half-leading on each side and is thus exactly 'line-height'. Boxes of child elements do not influence this height. Although margins, borders, and padding of non-replaced elements do not enter into the line box calculation, they are still rendered around inline boxes.
This means that if the height specified by 'line-height' is less than the content height of contained boxes, backgrounds and colors of padding and borders may "bleed" into adjoining line boxes. User agents should render the boxes in document order.
This will cause the borders on subsequent lines to paint over the borders and text of previous lines. When calc is used for controlling text size, be sure that one of the values includes a relative length unit , for example:. For example:. Note: The Chrome browser currently won't accept some values returned by calc when an integer is expected.
This includes any division, even if it results in an integer. In this example, the CSS creates a banner that stretches across the window, with a pixel gap between both sides of the banner and the edges of the window:. Collectives on Stack Overflow.
Learn more. Asked 3 years, 11 months ago. Active 3 years, 11 months ago. Viewed 3k times. Improve this question. Asons Anis Smail Anis Smail 7 7 silver badges 20 20 bronze badges.
Add a comment. Active Oldest Votes. Improve this answer. Amr Labib Amr Labib 3, 3 3 gold badges 17 17 silver badges 30 30 bronze badges.
0コメント