--- title: padding-bottom slug: Web/CSS/padding-bottom tags: - CSS - CSS 内边距 - CSS 属性 translation_of: Web/CSS/padding-bottom --- <div>{{CSSRef}}</div> <p>CSS属性 <strong>padding-bottom</strong> 是指一个元素在内边距区域(padding area)中下方的高度。内边距(padding)是指一个元素的内容和边框之间的区域。和外边距(margin)不同,内边距(padding)是不允许有负值的。内边距(padding)可以用四个值声明一个元素的四个方向的内边距(paddings),这是一种CSS缩写属性。</p> <p><img alt="The effect of the CSS padding-bottom property on the element box" src="/files/4109/padding-bottom.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> <pre class="brush:css no-line-numbers">/* <length> values */ padding-bottom: 0.5em; padding-bottom: 0; padding-bottom: 2cm; /* <percentage> value */ padding-bottom: 10%; /* Global values */ padding-bottom: inherit; padding-bottom: initial; padding-bottom: unset; </pre> <p>{{cssinfo}}</p> <h2 id="Syntax">Syntax</h2> <h3 id="Values">Values</h3> <dl> <dt>{{cssxref("length")}}</dt> <dd>当内边距(padding)大小是一个固定单位数值的时候,一定不能为负数。</dd> <dt> </dt> <dt>{{cssxref("percentage")}}</dt> <dd>当内边距(padding)是一个百分比的时候, 百分比是和本身包含的元素的宽度有关的,同样一定不能为负数。</dd> </dl> <h3 id="Formal_syntax">Formal syntax</h3> {{csssyntax}} <h2 id="Examples">Examples</h2> <pre class="eval">.content { padding-bottom: 5%; } .sidebox { padding-bottom: 10px; } </pre> <h2 id="Specifications">Specifications</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}</td> <td>{{ Spec2('CSS3 Box') }}</td> <td>No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}.</td> </tr> <tr> <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}</td> <td>{{ Spec2('CSS3 Transitions') }}</td> <td>Defines <code>padding-bottom</code> as animatable.</td> </tr> <tr> <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}</td> <td>{{ Spec2('CSS2.1') }}</td> <td>No change from {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}.</td> </tr> <tr> <td>{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}</td> <td>{{ Spec2('CSS1') }}</td> <td>Initial definition.</td> </tr> </tbody> </table> <h2 id="Browser_compatibility">Browser compatibility</h2> {{Compat("css.properties.padding-bottom")}} <h2 id="See_also">See also</h2> <ul> <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li> <li>The {{cssxref("padding")}} shorthand property can be used to set paddings on all four sides of an element with a single declaration: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, <code>padding-bottom</code>, and {{cssxref("padding-left")}}.</li> </ul>