All geek questions in one place

The HTML document type calls the SPAN tag with a special gap between the top and bottom

In the following example with the Transitional doctype HTML 4.01 declaration, the span will not receive a special gap between the top and bottom.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <body> <div style="background:red"><span>dark green</span></div> </body> </html>

CSS

 span { background: yellow; color: black; font-size: 12px; font-family: Arial, sans-serif; font-weight: normal; }

But if we change it to use the HTML5 <!DOCTYPE html> declaration, the span will receive a special space.

Here is an example in jsfiddle (if you change the DTD of the Fiddle parameters to use HTML5, you will see a problem there.

+4
source share
1 answer

This is due to how the line-height is calculated on the div element. Setting the "line-height" of the div element to the same "font size" as the range resolves this issue. Like this :

 div { line-height: 12px; }

String (and HTML5) DOCTYPEs seem to force "line-height" as if it were "min-height". Even if there is no text in the element, "line-height" is still applied.

Transitional DOCTYPE launches the “Nearly Standards” mode in browsers, which is basically a standards mode with a few quirks .

This page explains the behavior of line height calculations in Near Standards mode:

String elements contribute to line height if and only if one of the following values ​​is true.

If the item:

  • Contains text characters
  • Has a non-zero border width
  • Has a non-zero margin
  • Has a non-zero padding
  • Has a background image
  • Sets vertical alignment to a value other than the base level

Note that line breaks are not considered a text character for this definition, unless they are the only contents of a line string. In this case, the height of the linear block remains the top line of the top line and the bottom bottom line of the bottom of the line, regardless of the specified line height.

If the img element is the only content in the table cell, the row height of the cell height window is snapped to zero.

+5
source

Source: https://habr.com/ru/post/1486951/

More articles:


All Articles