1
edit
Changes
no edit summary
<span style="margin:0;background:#ffff33;font-size:120%;font-weight:bold;border:1px solid #a3b0bf;text-align:left;color:#000;padding:0.2em 0.4em;">This document is a work in progress and is subject to change.</span><br /><br />
== Summary ==
The bottom property is used to horizontally offset from the bottom edge of an element.
<table border="0">
<tr>
<td><b>Applicability:</b></td><td>The bottom property can be used for all CSS elements.<td>
</tr>
<tr>
<td><b>[http://developer.mozilla.org/en/docs/CSS:%40media#Media_groups Media Group:]</b>
</td><td>Visual</td>
</tr>
<tr>
<td><b>Inherited:</b></td><td>No</td>
</tr>
<tr>
<td><b>Default Value:</b></td><td>auto</td>
</tr>
</table>
== Syntax ==
<pre>
TARGET_ELEMENT{bottom: inhert !important}
TARGET_ELEMENT{bottom: auto}
TARGET_ELEMENT{bottom: 20%}
TARGET_ELEMENT{bottom: 20px}
</pre>
== Legal Values ==
<table border="1" cellspacing="2" cellpadding="5">
<tr>
<th align="left">Value</th><th align="left">Description</th>
</tr>
<tr>
<td>inherit</td><td>Explicitly sets the value to that of the parent</td>
</tr>
<tr>
<td>auto</td><td>Allows the browser to calculate the bottom position of the element</td>
</tr>
<tr>
<td>percentage</td><td>Sets the bottom position in a percentage from the left edge. Can be 0%-100%</td>
</tr>
<tr>
<td>length</td><td>Sets the bottom position in pixels (px), centimeters (cm), etc, from the bottom edge.</td>
</tr>
</table>
== Mozilla Recommended Values ==
== Usage Examples ==
<pre>
p{
position: absolute;
bottom: 20px
}
img{
position: absolute;
bottom: 15%
}
div{
position: absolute;
bottom: auto
}
</pre>
== Notes ==
When bottom property is used with the position property, if the position property has a value of "static", the bottom property has no effect on the element.
== Specification Conformance ==
*CSS 1
*[http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-bottom CSS 2.1]
*CSS 3
== Browser Compatibility ==
== See Also ==
* [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_RIGHT right property]
* [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_LEFT left property]
* [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_TOP top property]
== Summary ==
The bottom property is used to horizontally offset from the bottom edge of an element.
<table border="0">
<tr>
<td><b>Applicability:</b></td><td>The bottom property can be used for all CSS elements.<td>
</tr>
<tr>
<td><b>[http://developer.mozilla.org/en/docs/CSS:%40media#Media_groups Media Group:]</b>
</td><td>Visual</td>
</tr>
<tr>
<td><b>Inherited:</b></td><td>No</td>
</tr>
<tr>
<td><b>Default Value:</b></td><td>auto</td>
</tr>
</table>
== Syntax ==
<pre>
TARGET_ELEMENT{bottom: inhert !important}
TARGET_ELEMENT{bottom: auto}
TARGET_ELEMENT{bottom: 20%}
TARGET_ELEMENT{bottom: 20px}
</pre>
== Legal Values ==
<table border="1" cellspacing="2" cellpadding="5">
<tr>
<th align="left">Value</th><th align="left">Description</th>
</tr>
<tr>
<td>inherit</td><td>Explicitly sets the value to that of the parent</td>
</tr>
<tr>
<td>auto</td><td>Allows the browser to calculate the bottom position of the element</td>
</tr>
<tr>
<td>percentage</td><td>Sets the bottom position in a percentage from the left edge. Can be 0%-100%</td>
</tr>
<tr>
<td>length</td><td>Sets the bottom position in pixels (px), centimeters (cm), etc, from the bottom edge.</td>
</tr>
</table>
== Mozilla Recommended Values ==
== Usage Examples ==
<pre>
p{
position: absolute;
bottom: 20px
}
img{
position: absolute;
bottom: 15%
}
div{
position: absolute;
bottom: auto
}
</pre>
== Notes ==
When bottom property is used with the position property, if the position property has a value of "static", the bottom property has no effect on the element.
== Specification Conformance ==
*CSS 1
*[http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-bottom CSS 2.1]
*CSS 3
== Browser Compatibility ==
== See Also ==
* [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_RIGHT right property]
* [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_LEFT left property]
* [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_TOP top property]