diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/css/padding-top/index.html | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/css/padding-top/index.html')
-rw-r--r-- | files/zh-cn/web/css/padding-top/index.html | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/padding-top/index.html b/files/zh-cn/web/css/padding-top/index.html new file mode 100644 index 0000000000..ad13e5ef19 --- /dev/null +++ b/files/zh-cn/web/css/padding-top/index.html @@ -0,0 +1,150 @@ +--- +title: padding-top +slug: Web/CSS/padding-top +tags: + - CSS + - CSS 内边距 + - CSS 属性 +translation_of: Web/CSS/padding-top +--- +<div>{{CSSRef}}</div> + +<p>CSS属性 <strong>padding-top </strong>是指一个元素在内边距区域(padding area)中上方的高度。内边距(padding)是指一个元素的内容和边框之间的区域。和外边距(margin)不同,内边距(padding)是不允许有负值的。内边距(padding)可以用四个值声明一个元素的四个方向的内边距(paddings),这是一种CSS缩写属性。</p> + +<p><img alt="The effect of the CSS padding-top property on the element box" src="/files/4105/padding-top.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +padding-top: 0.5em; +padding-top: 0; +padding-top: 2cm; + +/* <percentage> value */ +padding-top: 10%; + +/* Global values */ +padding-top: inherit; +padding-top: initial; +padding-top: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">语法规则</h2> + +<h3 id="Values" name="Values">取值</h3> + +<dl> + <dt>{{cssxref("length")}}</dt> + <dd>当内边距(padding)大小是一个固定单位数值的时候,一定不能为负数。</dd> + <dt>{{cssxref("percentage")}}</dt> + <dd>当内边距(padding)是一个百分比的时候, 百分比是和<strong>包含块(containing block)的宽度</strong>有关的,同样一定不能为负数。</dd> +</dl> + +<h3 id="正式语法">正式语法</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">实例</h2> + +<pre class="brush: css">.content { padding-top: 5%; } +.sidebox { padding-top: 10px; } +</pre> + +<h2 id="详细说明">详细说明</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-top') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-top') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>padding-top</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No change from {{ Specname('CSS1', '#padding-top', 'padding-top') }}.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding-top', 'padding-top') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器的兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="更多浏览"> 更多浏览</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: <code>padding-top</code>, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, and {{cssxref("padding-left")}}.</li> +</ul> + +<p> + <audio style="display: none;"> </audio> +</p> |