padding-top property
[This documentation is preliminary and is subject to change.]
Sets or retrieves the amount of space to insert between the top border of the object and the content.
 |
Syntax
padding-top:
<length>
|
<percentage>
Property values
- length
-
Floating-point number, followed by an absolute units designator (
cm,mm,in,pt, orpc) or a relative units designator (em,ex, orpx). For more information about the supported length units, see CSS Values and Units Reference. - percentage
-
Integer, followed by a percent sign (%). The value is a percentage of the width of the parent object.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value | 0 |
Standards information
- CSS 2.1, Section 5.5.6
Remarks
As of Microsoft Internet Explorer 5.5, this property applies to inline elements. With earlier versions of Windows Internet Explorer, inline elements must have an absolute position or layout to use this property. Element layout is set by providing a value for the height property or the width property.
Negative values are not allowed.
Examples
The following examples use the padding-top attribute and the padding-top property to change the padding of the object.
This example uses td as a selector in an embedded style sheet to set the top padding for all table cells to 1 centimeter.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/padding-top.htm
<STYLE>
TD { padding-top:1cm }
</STYLE>
This example uses inline scripting to set the cell's top padding to 1 centimeter when an onmouseover event occurs.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/paddingTop.htm
<TD onmouseover="this.style.paddingTop='1cm'"
onmouseout="this.style.paddingTop=''">
<IMG src="sphere.jpg">
</TD>
Build date: 3/14/2012
The code object.style.paddingTop doesn't work while the document uses:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
Can there be any solution for this?
[jsudds.MSFT] The transitional !DOCTYPE without URL puts the browser into quirks mode. When this happens, IE uses the old box model, which includes border, padding, and content as part of the box size. Depending on your other CSS attributes, you may not immediately notice a change in padding.
According to the standard, the content sets the size of the box, and padding is calculated *in addition* to this size. In quirks mode, padding is inside the box, and the content is moved to adjust for it. (If the box is too small, it is enlarged to accomodate the text.) In other words, it may not work like you expect it to according to the standard because quirks mode is different.
The following box size increases when the mouse hovers over it; however, if the box is set to a fixed height (100px), you may not notice the increase in quirks mode.
<div onmouseover="this.style.paddingTop='20px';" style="border:1px solid black">TESTING</div>
The solution is to make sure your browser is set to standards mode, and code to that.
- 6/30/2008
- soft-master
- 7/18/2008
- John Sudds [Microsoft]
