CSS LINE HEIGHT

This property specifies the height of an in-line element box. If the ‘line-height’ value is greater than the value of the ‘font-size’ for the element, this difference (called the “leading”) is cut in half (called the “half-leading”) and distributed evenly on the top and bottom of the in-line box. In this manner, the content of an in-line element box is centered within the line-box (assuming no ‘vertical-align’ property is also set to change this behavior.) Negative values for this property are not allowed. This property is also a component of the ‘font’ shorthand property.

A few other rules govern line-height calculation:

  • If the computed value for the ‘line-height’ property is less than the computed ‘font-size’ for an in-line element box, fonts may ‘bleed’ (overflow) the element box.
  • If this property is set for a block-level element box that contains in-line elements, the value specifies the minimal height of each of the in-line boxes.
  • For in-line element boxed, this property specifies the height of the boxes generated by the element.
  • For in-line replaced elements the height of the element box is given by the ‘height’ property instead of the ‘line-height’ property.
  • If an element box contains text in more than one font-size, the ‘line-height’ property should be determined using the largest font-size. This helps to create consistent baselines between adjacent line boxes. 
    		•

     

    Example

    div.test { line-height: 160%; font-size: 10pt } 

    <div style=”line-height: 160%; font-size: 10pt”>content</div>

     

    Possible Values

    Value Description
    inherit Explicitly sets the value of this property to that of the parent.
    normal Sets the line height to a ‘reasonable’ value relative to the element’s font face. Browser dependent results. CSS2 recommends a computed value between 1.0 and 1.2.
    [number] This number is a multiplier to determine the line height as a factor of the current element font-size. To determine the line height from the [number], multiply the current element font-size by the [number]. Child elements will inherit the multiplying factor. Negative values are not allowed.
    [length] This sets the ‘line-height’ to an explicit length value. Negative values are not allowed.
    [percentage] This number is also a multiplier (like [number]) used to determine the line height as a factor of the current element font-size. To determine the line height from the [percentage], multiply the current element computed ‘font-size’ by the [percentage]. Negative values are not allowed.

     

     

    Posted by Sergio Jasinski Filed in CSS Dimensions

    || BlinkList || del.icio.us || Digg it || Earthlink || Furl || iFeedReaders || ma.gnolia || Maple.nu || Netvouz || Netscape || RawSugar || reddit || Scuttle || Shadows || Simpy || Spurl || StumbleUpon || Wink || Yahoo MyWeb ||

    Leave a Reply