Measurement fundamentals in quirks mode

Height and width are the measurements used most frequently. To set these measurements, use the height and width attributes (or related properties).

Inline elements gain layout when the height or width are set. Inline elements with layout expose the same layout properties, such as border, margin, and padding, as block elements. The following example shows how layout attributes affect the appearance of a web page when the height property of an element is set:

<!-- Styles render because this link has layout. -->
<a href="https://msdn.microsoft.com/" style="width: 150px; 
  border: 1px solid; padding: 10px; margin: 5px;">MSDN Online</a>

<!-- Styles do not render because this link has no layout. -->
<a href="https://msdn.microsoft.com/" style="border: 1 solid; padding: 10px; margin: 5px;">MSDN Online</a>

Absolute and relative length units

When setting or retrieving the measurement and location values of an element, you can use different length units to achieve a particular style. Using length units consistently simplifies measurement and location values. The mixing of length units requires you to determine the value of an absolute length unit programmatically, based on a relative unit for every system. For example, you would have to convert inches to pixels on every machine that renders your document.

Layout properties contribute to the dimensions of an element and should be considered when determining the dimensions of the content. The content of an element is sized to any specified measurements minus the border and padding measurements. Because the DHTML and cascading style sheet properties do not provide a measurement of the content without its padding, the padding properties must be specifically queried to retrieve an accurate measurement. Although you can use the offset and client properties to determine the size of the content, it is easier to subtract the size of the border and padding properties from the width of the element.

Consider the following DIV element:

<div id="odiv" style="padding: 10px; width: 250px; 
  height: 250px; border: 2px outset; background-color: #CFCFCF;">
</div>

The specified height and width of the preceding DIV element is 250 pixels. You can formulate the width of the content as follows:

odiv.style.width - odiv.style.border Width - odiv.style.padding

However, since all three properties return variant data types, you must either convert the values to integers or use properties that return integer values. For example, to obtain the width of the element in pixels, you can use one of the following techniques in Jscript:

var iWidth = odiv.style.pixelWidth 
  var iWidth = parseInt(odiv.style.width) 
  (width is specified in pixels) 
  var iWidth = odiv.offsetWidth

If the values of the border and padding properties are set in the same length units as the width property, you can convert the variant value to an integer. To determine the content dimensions, use the border and padding properties and the element dimensions. When retrieving border and padding values, use the border-width and padding properties if the values are uniform on all sides of the element. Otherwise, you must specifically query the border-left-width, border-right-width, padding-left, and padding-right properties to obtain an accurate measurement.

For example, to obtain the width of the content in pixels, you can use one of the following techniques in Jscript, where iWidth is based on one of the previous example techniques.

• Use this formula if the border and padding sizes are not uniform on all sides:

  var iCntWidth = (iWidth - parseInt(odiv.style.border-left-width) 
  parseInt(odiv.style.border-right-width) 
      - parseInt(odiv.style.padding-left) 
      - parseInt(odiv.style.padding-right)
      )
  

• Use this formula if the border and padding sizes are uniform on all sides:

  var iCntWidth = (iWidth - parseInt(odiv.style.border Width) 
  parseInt(odiv.style.padding)
      )
  

• Use this formula instead of using the border properties:

  var iCntWidth = (iWidth - (odiv.offsetWidth - odiv.clientWidth) 
  parseInt(odiv.style.padding)
      )
  

Measurement example

The following example uses the first formula from the preceding section to move and resize a positioned element based on the content of another element:

<script>
window.onload=fnInit;
function fnInit(){
   var iWidth=odiv.style.pixelWidth;
   var iHeight=odiv.style.pixelHeight;
   var iCntWidth=(iWidth - parseInt(odiv.style.border-left-width)
      - parseInt(odiv.style.border-right-width)
      - parseInt(odiv.style.padding-left)
      - parseInt(odiv.style.padding-right));
   var iCntHeight=(iHeight - parseInt(odiv.style.border-top-width)
      - parseInt(odiv.style.border-bottom-width)
      - parseInt(odiv.style.paddingTop)
      - parseInt(odiv.style.paddingBottom));
   var iTop=odiv.offsetTop + parseInt(odiv.style.border Top)
      + parseInt(odiv.style.paddingTop);
   var iLeft=odiv.offsetLeft + parseInt(odiv.style.border-left)
      + parseInt(odiv.style.padding-left);   
   odiv2.style.width=iCntWidth;
   odiv2.style.height=iCntHeight;
   odiv2.style.top=iTop;
   odiv2.style.left=iLeft;
}
</script>
<div id="odiv" style="padding: 20px 5px 10px 10px; 
  width: 250px; height: 250px; border: 10px outset; 
  background-color: #CFCFCF;">
</div>
<div id="odiv2" style="position: absolute; border: 2 inset; background-color: #000099;">
</div>

See also

Concepts

Cascading style sheet reference
Properties by name
Measurement and location properties in strict mode

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.