下边距 | bottom

bottom样式属性定义了定位元素下外边距边界与其包含块下边界之间的偏移，非定位元素设置此属性无效。

/* <length> values */
bottom: 3px;
bottom: 2.4em;

/* <percentages> of the height of the containing block */
bottom: 10%;

/* Keyword value */
bottom: auto;

/* Global values */
bottom: inherit;
bottom: initial;
bottom: unset;

bottom的效果取决于元素的position属性：

• 当position设置为absolute或fixed时，bottom属性指定了定位元素下外边距边界与其包含块下边界之间的偏移。

• 当position设置为relative时，bottom属性指定了元素的下边界离开其正常位置的偏移。

• 当position设置为sticky时，如果元素在viewport里面，bottom属性的效果和position为relative等同；如果元素在viewport外面，bottom属性的效果和position为fixed等同。

• 当position设置为static时，bottom属性无效。

当top和bottom同时指定时，并且height没有被指定或者指定为auto或100%的时候，top和bottom都会生效，在其他情况下，如果height被限制，则top属性会优先设置，bottom属性则会被忽略。

Initial value	auto
Applies to	positioned elements
Inherited	no
Percentages	refer to the height of the containing block
Media	visual
Computed value	if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation type	a length, percentage or calc();
Canonical order	the unique non-ambiguous order defined by the formal grammar

语法

值

<length>一个负值、空值或正值，代表了：

• 对于绝对定位的元素，元素下外边距边界与其包含块下边界之间的偏移。

• 对于相对定位定位的元素，元素的下边界离开其正常位置的偏移。

<percentage>包含块高度的百分比<percentage>。auto规定：

• 对于绝对定位的元素, 元素的定位基于top 且 height: auto ，则高度由内容决定。

• 对于相对定位定位的元素, 相对于它原有位置的偏移是基于top , 当 top 为 auto, 该元素不垂直移动.

inherit指代有明确计算结果的父级元素的值，（需要注意的是，父级元素并不一定是包裹该子元素的块级元素）。该值会根据父级元素的具体情况被处理为<length>,<percentage>或者auto。

正式语法

<length> | <percentage> | auto

示例

下面的例子分别展示了bottom属性在position为absolute和fixed的不同行为.

HTML

<p>This<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p>
<div class="fixed"><p>Fixed</p></div>
<div class="absolute"><p>Absolute</p></div>

CSS

p {
  font-size: 30px;
  line-height: 2em;
}

div {
  width: 48%;
  text-align: center;
  background: rgba(55,55,55,.2);
  border: 1px solid blue;
}

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

结果

规范

Specification	Status	Comment
CSS TransitionsThe definition of 'bottom' in that specification.	Working Draft	Defines bottom as animatable.
CSS Level 2 (Revision 1)The definition of 'bottom' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	51	6	1.0 (85)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	1.0 (1.9.2)	?	?	?

在7.0之前的InternetExplorer版本中，当top和bottom都被指定时，则元素位置受到过度约束，并且top属性优先。在这种情况下，bottom计算值设置为-top，而忽略其指定的值。

另见

• position, top, left, right