css-reference/_includes/collections/box-model.html at master · wandou911/css-reference · GitHub

1
<section id="border-bottom-width" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/border-bottom-width/" data-property-name="border-bottom-width" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-bottom-width">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-bottom-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#border-bottom-width"><span>#</span>border-bottom-width</a></h2><div class="property-description"><p>Like <code class="shorthand"><a href="http://cssreference.parryqiu.com/#border-width">border-width</a></code>, but for the <strong>bottom</strong> border only.</p></div></header><style type="text/css">.border-bottom-width { border-bottom-style: solid; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="border-bottom-width: 0;">border-bottom-width: 0;</code></p><div class="example-description"><p>Removes the bottom border.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div border-bottom-width" id="border-bottom-width-0">Hello world</div></div></aside><style type="text/css">#border-bottom-width-0{ border-bottom-width:0;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="border-bottom-width: 4px;">border-bottom-width: 4px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div border-bottom-width" id="border-bottom-width-4px">Hello world</div></div></aside><style type="text/css">#border-bottom-width-4px{ border-bottom-width:4px;}</style></section></section><section id="border-left-width" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/border-left-width/" data-property-name="border-left-width" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-left-width">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-left-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#border-left-width"><span>#</span>border-left-width</a></h2><div class="property-description"><p>Like <code class="shorthand"><a href="http://cssreference.parryqiu.com/#border-width">border-width</a></code>, but for the <strong>left</strong> border only.</p></div></header><style type="text/css">.border-left-width { border-left-style: solid; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="border-left-width: 0;">border-left-width: 0;</code></p><div class="example-description"><p>Removes the left border.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div border-left-width" id="border-left-width-0">Hello world</div></div></aside><style type="text/css">#border-left-width-0{ border-left-width:0;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="border-left-width: 4px;">border-left-width: 4px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div border-left-width" id="border-left-width-4px">Hello world</div></div></aside><style type="text/css">#border-left-width-4px{ border-left-width:4px;}</style></section></section><section id="border-right-width" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/border-right-width/" data-property-name="border-right-width" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-right-width">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-right-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#border-right-width"><span>#</span>border-right-width</a></h2><div class="property-description"><p>Like <code class="shorthand"><a href="http://cssreference.parryqiu.com/#border-width">border-width</a></code>, but for the <strong>right</strong> border only.</p></div></header><style type="text/css">.border-right-width { border-right-style: solid; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="border-right-width: 0;">border-right-width: 0;</code></p><div class="example-description"><p>Removes the right border.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div border-right-width" id="border-right-width-0">Hello world</div></div></aside><style type="text/css">#border-right-width-0{ border-right-width:0;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="border-right-width: 4px;">border-right-width: 4px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div border-right-width" id="border-right-width-4px">Hello world</div></div></aside><style type="text/css">#border-right-width-4px{ border-right-width:4px;}</style></section></section><section id="border-top-width" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/border-top-width/" data-property-name="border-top-width" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-top-width">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-top-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#border-top-width"><span>#</span>border-top-width</a></h2><div class="property-description"><p>Like <code class="shorthand"><a href="http://cssreference.parryqiu.com/#border-width">border-width</a></code>, but for the <strong>top</strong> border only.</p></div></header><style type="text/css">.border-top-width { border-top-style: solid; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="border-top-width: 0;">border-top-width: 0;</code></p><div class="example-description"><p>Removes the top border.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div border-top-width" id="border-top-width-0">Hello world</div></div></aside><style type="text/css">#border-top-width-0{ border-top-width:0;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="border-top-width: 4px;">border-top-width: 4px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div border-top-width" id="border-top-width-4px">Hello world</div></div></aside><style type="text/css">#border-top-width-4px{ border-top-width:4px;}</style></section></section><section id="border-width" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/border-width/" data-property-name="border-width" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-width">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#border-width"><span>#</span>border-width</a></h2><div class="property-description"><p>Defines the width of the element&#39;s borders.</p></div></header><style type="text/css">.border-width { border-style: solid; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="border-width: 1px;">border-width: 1px;</code></p><div class="example-description"><p>Defines the width of <strong>all</strong> borders to 1px.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div border-width" id="border-width-1px">Hello world</div></div></aside><style type="text/css">#border-width-1px{ border-width:1px;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="border-width: 2px 0;">border-width: 2px 0;</code></p><div class="example-description"><p>Defines the top and bottom borders to 2px, the left and right to 0.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div border-width" id="border-width-2px-0">Hello world</div></div></aside><style type="text/css">#border-width-2px-0{ border-width:2px 0;}</style></section></section><section id="box-sizing" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/box-sizing/" data-property-name="box-sizing" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="box-sizing">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/box-sizing" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#box-sizing"><span>#</span>box-sizing</a></h2><div class="property-description"><p>Defines how the width and height of the element are calculated: whether they include the <em>padding</em> and <em>borders</em> or not.</p></div></header><style type="text/css">.box-sizing .actual { border: 12px solid #310736;display: block;padding: 30px;position: relative;width: 200px; }.box-sizing span { background: hsl(48, 100%, 67%);display: block;padding: 5px 0; }.box-sizing .box { height: 23px;position: absolute;text-align: left;width: 200px; }.box-sizing .box:before { content: "200px"; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="box-sizing: content-box;">box-sizing: content-box;</code></p><div class="example-description&q
72A1
uot;><p>The <strong>width</strong> and <strong>height</strong> of the element only apply to the <strong>content</strong> of the element.</p><p>For example, this element has</p><ul><li><code>border-width: 12px</code></li><li><code>padding: 30px</code></li><li><code>width: 200px</code></li></ul><p>The <em>full width</em> is 24px + 60px + 200px = <strong>284px</strong>.</p><p>The content has the defined width. The box accomodates for those dimensions.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div box-sizing" id="box-sizing-content-box"><div class="actual"><span>Hello world</span><div class="box box--red"></div></div></div></div></aside><style type="text/css">#box-sizing-content-box{ box-sizing:content-box;}</style><style type="text/css">#box-sizing-content-box .actual { box-sizing: content-box; }#box-sizing-content-box .box { left: 30px;top: 30px;width: 196px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="box-sizing: border-box;">box-sizing: border-box;</code></p><div class="example-description"><p>The <strong>width</strong> and <strong>height</strong> of the element apply to all parts of the element: the <strong>content</strong>, the <strong>padding</strong> and the <strong>borders</strong>.</p><p>For example, this element has</p><ul><li><code>border-width: 12px</code></li><li><code>padding: 30px</code></li><li><code>width: 200px</code></li></ul><p>The <em>full width</em> is <strong>200px</strong>, no matter what.</p><p>The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 60px - 24px = <strong>116px</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div box-sizing" id="box-sizing-border-box"><div class="actual"><span>Hello world</span><div class="box box--red"></div></div></div></div></aside><style type="text/css">#box-sizing-border-box{ box-sizing:border-box;}</style><style type="text/css">#box-sizing-border-box .actual { box-sizing: border-box; }#box-sizing-border-box .box { height: 27px;left: -12px;top: 30px; }</style></section></section><section id="height" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/height/" data-property-name="height" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="height">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/height" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#height"><span>#</span>height</a></h2><div class="property-description"><p>Defines the height of the element.</p></div></header><style type="text/css">.height { max-width: 400px; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="height: auto;">height: auto;</code></p><div class="example-description"><p>The element will <strong>automatically</strong> adjust its height to allow its content to be displayed correctly.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div height" id="height-auto"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div></div></aside></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="height: 100px;">height: 100px;</code></p><div class="example-description"><p>You can use <strong>numeric values</strong> like <strong>pixels</strong>, <strong>(r)em</strong>, <strong>percentages</strong>...</p><p>If the content does not fit within the specified height, it will <strong>overflow</strong>. How the container will handle this overflowing content is defined by the <code class="shorthand"><a href="http://cssreference.parryqiu.com/#overflow">overflow</a></code> property.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div height" id="height-100px"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div></div></aside><style type="text/css">#height-100px .block { height: 100px; }</style></section></section><section id="line-height" class="property"><header class="property-header"><nav class="property-links"><span class="property-collections"><span>In collections:</span> <a href="{{site.url}}/box-model/"><strong>box-model</strong> </a><a href="{{site.url}}/typography/"><strong>typography</strong> </a></span><a class="property-links-direct" href="{{site.url}}/property/line-height/" data-property-name="line-height" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="line-height">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/line-height" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#line-height"><span>#</span>line-height</a></h2><div class="property-description"><p>Defines the height of a single line of text.</p></div></header><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="line-height: normal;">line-height: normal;</code></p><div class="example-description"><p>Reverts to the <strong>default</strong> value of the browser.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div line-height" id="line-height-normal"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</p></div></div></aside><style type="text/css">#line-height-normal{ line-height:normal;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-recommended" data-tooltip="This type of value is recommended for this property">recommended</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="line-height: 1.6;">line-height: 1.6;</code></p><div class="example-description"><p>You can use <strong>unitless</strong> values: the line height will be relative to the font size.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div line-height" id="line-height-16"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</p></div></div></aside><style type="text/css">#line-height-16{ line-height:1.6;}</style><style type="text/css">#line-height-16 .block { line-height: 1.6; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="line-height: 30px;">line-height: 30px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div line-height" id="line-height-30px"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</p></div></div></aside><style type="text/css">#line-height-30px{ line-height:30px;}</style><style type="text/css">#line-height-30px .block { line-height: 30px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="line-height: 0.8em;">line-height: 0.8em;</code></p><div class="example-description"><p>You can use <strong>em</strong> values: like with unitless values, the line height will be relative to the font size.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div line-height" id="line-height-08em"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</p></div></div></aside><style type="text/css">#line-height-08em{ line-height:0.8em;}</style><style type="text/css">#line-height-08em .block { line-height: 0.8em; }</style></section></section><section id="margin-bottom" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/margin-bottom/" data-property-name="margin-bottom" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="margin-bottom">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/margin-bottom" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#margin-bottom"><span>#</span>margin-bottom</a></h2><div class="property-description"><p>Defines the space <strong>outside</strong> the element, on the <strong>bottom</strong> side.</p></div></header><style type="text/css">.margin-bottom { background: hsl(0, 0%, 80%);padding: 1em; }</style><style type="text/css">.margin-bottom .block { border-radius: 0; }.margin-bottom .block--alpha { position: relative; }.margin-bottom .box { bottom: 0;left: 0;position: absolute;right: 0;transform: translateY(100%); }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-bottom: 0;">margin-bottom: 0;</code></p><div class="example-description"><p>Removes any margin at the bottom.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-bottom" id="margin-bottom-0"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-bottom-0 .box { display: none; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-bottom: 30px;">margin-bottom: 30px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-bottom" id="margin-bottom-30px"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-bottom-30px .block--alpha { margin-bottom: 30px; }#margin-bottom-30px .box { height: 30px; }#margin-bottom-30px .box:before { content: "30px"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-bottom: 2em;">margin-bottom: 2em;</code></p><div class="example-description"><p>You can use <strong>(r)em</strong> values.</p><p>The value is <strong>relative</strong> to the font size:</p><ul><li><strong>em</strong>: relative to the <em>element</em>&#39;s current font size</li><li><strong>rem</strong>: relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>&#39;s font size</li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-bottom" id="margin-bottom-2em"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-bottom-2em .block--alpha { margin-bottom: 2em; }#margin-bottom-2em .box { height: 2em; }#margin-bottom-2em .box:before { content: "2em"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-bottom: 10%;">margin-bottom: 10%;</code></p><div class="example-description"><p>You can use <strong>percentage</strong> values.<br>The percentage is based on the <em>width</em> of the <em>container</em>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-bottom" id="margin-bottom-10"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-bottom-10 .block--alpha { margin-bottom: 10%; }#margin-bottom-10 .box { bottom: auto;height: 100px;top: 100%;transform: rotate(-90deg) translateX(-100%);transform-origin: top left;width: 10%; }#margin-bottom-10 .box:before { content: "10%"; }</style></section></section><section id="margin-left" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/margin-left/" data-property-name="margin-left" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="margin-left">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/margin-left" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#margin-left"><span>#</span>margin-left</a></h2><div class="property-description"><p>Defines the space <strong>outside</strong> the element, on the <strong>left</strong> side.</p></div></header><style type="text/css">.margin-left { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding: 0; }</style><style type="text/css">.margin-left .block { border-radius: 0; }.margin-left .block--alpha { position: relative; }.margin-left .box { bottom: 0;left: 0;position: absolute;top: 0;transform: translateX(-100%); }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-left: 0;">margin-left: 0;</code></p><div class="example-description"><p>Removes any margin on the left.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-left" id="margin-left-0"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-left-0 .box { display: none; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-left: 50px;">margin-left: 50px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-left" id="margin-left-50px"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-left-50px .block--alpha { margin-left: 50px; }#margin-left-50px .box { width: 50px; }#margin-left-50px .box:before { content: "50px"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-left: 7em;">margin-left: 7em;</code></p><div class="example-description"><p>You can use <strong>(r)em</strong> values.</p><p>The value is <strong>relative</strong> to the font size:</p><ul><li><strong>em</strong>: relative to the <em>element</em>&#39;s current font size</li><li><strong>rem</strong>: relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>&#39;s font size</li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-left" id="margin-left-7em"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-left-7em .block--alpha { margin-left: 7em; }#margin-left-7em .box { width: 7em; }#margin-left-7em .box:before { content: "7em"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-left: 30%;">margin-left: 30%;</code></p><div class="example-description"><p>You can use <strong>percentage</strong> values.<br>The percentage is based on the <em>width</em> of the <em>container</em>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-left" id="margin-left-30"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong></div><div class="box box--plum"></div><div class="block block--yellow&qu
9927
ot;>Third item</div></div></div></aside><style type="text/css">#margin-left-30 .block--alpha { margin-left: 30%; }#margin-left-30 .box { height: 2.4em;left: 0;top: 3.2em;transform: none;width: 30%; }#margin-left-30 .box:before { content: "30%"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-left: auto;">margin-left: auto;</code></p><div class="example-description"><p>The <strong>auto</strong> keyword will give the left side a share of the <strong>remaining space</strong>.</p><p>When combined with <code>margin-right: auto</code>, it will <strong>center</strong> the element, if a fixed width is defined.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-left" id="margin-left-auto"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><br>width: 200px</div><div class="box box--plum"></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-left-auto .block--alpha { margin-left: auto;width: 200px; }#margin-left-auto .box { height: 2.4em;left: 0;right: 200px;top: 3.2em;transform: none;width: auto; }#margin-left-auto .box:before { content: "auto"; }</style></section></section><section id="margin-right" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/margin-right/" data-property-name="margin-right" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="margin-right">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/margin-right" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#margin-right"><span>#</span>margin-right</a></h2><div class="property-description"><p>Defines the space <strong>outside</strong> the element, on the <strong>right</strong> side.</p></div></header><style type="text/css">.margin-right { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding: 0; }</style><style type="text/css">.margin-right .block { border-radius: 0; }.margin-right .block--alpha { position: relative; }.margin-right .box { bottom: 0;position: absolute;right: 0;top: 0;transform: translateX(100%); }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-right: 0;">margin-right: 0;</code></p><div class="example-description"><p>Removes any margin on the right.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-right" id="margin-right-0"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-right-0 .box { display: none; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-right: 50px;">margin-right: 50px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-right" id="margin-right-50px"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-right-50px .block--alpha { margin-right: 50px; }#margin-right-50px .box { width: 50px; }#margin-right-50px .box:before { content: "50px"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-right: 7em;">margin-right: 7em;</code></p><div class="example-description"><p>You can use <strong>(r)em</strong> values.</p><p>The value is <strong>relative</strong> to the font size:</p><ul><li><strong>em</strong>: relative to the <em>element</em>&#39;s current font size</li><li><strong>rem</strong>: relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>&#39;s font size</li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-right" id="margin-right-7em"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-right-7em .block--alpha { margin-right: 7em; }#margin-right-7em .box { width: 7em; }#margin-right-7em .box:before { content: "7em"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-right: 30%;">margin-right: 30%;</code></p><div class="example-description"><p>You can use <strong>percentage</strong> values.<br>The percentage is based on the <em>width</em> of the <em>container</em>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-right" id="margin-right-30"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong></div><div class="box box--plum"></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-right-30 .block--alpha { margin-right: 30%; }#margin-right-30 .box { height: 2.4em;right: 0;top: 3.2em;transform: none;width: 30%; }#margin-right-30 .box:before { content: "30%"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-right: auto;">margin-right: auto;</code></p><div class="example-description"><p>The <strong>auto</strong> keyword will give the right side a share of the <strong>remaining space</strong>.</p><p>When combined with <code>margin-left: auto</code>, it will <strong>center</strong> the element, if a fixed width is defined.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-right" id="margin-right-auto"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><br>width: 200px</div><div class="box box--plum"></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-right-auto .block--alpha { margin-right: auto;width: 200px; }#margin-right-auto .box { height: 2.4em;left: 200px;right: 0;top: 3.2em;transform: none;width: auto; }#margin-right-auto .box:before { content: "auto"; }</style></section></section><section id="margin-top" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/margin-top/" data-property-name="margin-top" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="margin-top">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/margin-top" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#margin-top"><span>#</span>margin-top</a></h2><div class="property-description"><p>Defines the space <strong>outside</strong> the element, on the <strong>top</strong> side.</p></div></header><style type="text/css">.margin-top { background: hsl(0, 0%, 80%);padding: 1em; }</style><style type="text/css">.margin-top .block { border-radius: 0; }.margin-top .block--alpha { position: relative; }.margin-top .box { left: 0;position: absolute;right: 0;top: 0;transform: translateY(-100%); }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-top: 0;">margin-top: 0;</code></p><div class="example-description"><p>Removes any margin at the top.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-top" id="margin-top-0"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-top-0 .box { display: none; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-top: 30px;">margin-top: 30px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-top" id="margin-top-30px"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-top-30px .block--alpha { margin-top: 30px; }#margin-top-30px .box { height: 30px; }#margin-top-30px .box:before { content: "30px"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-top: 2em;">margin-top: 2em;</code></p><div class="example-description"><p>You can use <strong>(r)em</strong> values.</p><p>The value is <strong>relative</strong> to the font size:</p><ul><li><strong>em</strong>: relative to the <em>element</em>&#39;s current font size</li><li><strong>rem</strong>: relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>&#39;s font size</li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-top" id="margin-top-2em"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-top-2em .block--alpha { margin-top: 2em; }#margin-top-2em .box { height: 2em; }#margin-top-2em .box:before { content: "2em"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin-top: 10%;">margin-top: 10%;</code></p><div class="example-description"><p>You can use <strong>percentage</strong> values.<br>The percentage is based on the <em>width</em> of the <em>container</em>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin-top" id="margin-top-10"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-top-10 .block--alpha { margin-top: 10%; }#margin-top-10 .box { height: 100%;transform: rotate(-90deg);transform-origin: top left;width: 10%; }#margin-top-10 .box:before { content: "10%"; }</style></section></section><section id="margin" class="property property--shorthand"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/margin/" data-property-name="margin" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="margin">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/margin" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#margin"><span>#</span>margin</a></h2><div class="property-description"><p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/margin-top" data-property-name="margin-top">margin-top</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/margin-right" data-property-name="margin-right">margin-right</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/margin-bottom" data-property-name="margin-bottom">margin-bottom</a></code> and <code class="shorthand"><a class="hash" href="{{site.url}}/property/margin-left" data-property-name="margin-left">margin-left</a></code>.</p></div></header><style type="text/css">.margin { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding: 0; }</style><style type="text/css">.margin .block { border-radius: 0; }.margin .square { align-items: center;border-radius: 0;display: flex;height: auto;justify-content: center;width: auto; }.margin .container { align-items: stretch;display: flex; }.margin .block--alpha { flex-grow: 1;flex-shrink: 1; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin: 0;">margin: 0;</code></p><div class="example-description"><p>Removes all margins.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin" id="margin-0"><div class="block block--pink">First item</div><div class="square square--top"></div><div class="container"><div class="square square--left"></div><div class="block block--alpha"><strong>Target</strong></div><div class="square square--right"></div></div><div class="square square--bottom"></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-0 .box { display: none; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin: 30px;">margin: 30px;</code></p><div class="example-description"><p>When using <strong>1</strong> value, the margin is set for <strong>all 4 sides</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin" id="margin-30px"><div class="block block--pink">First item</div><div class="square square--top"></div><div class="container"><div class="square square--left"></div><div class="block block--alpha"><strong>Target</strong></div><div class="square square--right"></div></div><div class="square square--bottom"></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-30px .square--top { height: 30px; }#margin-30px .square--top:before { content: "30px"; }#margin-30px .square--bottom { height: 30px; }#margin-30px .square--bottom:before { content: "30px"; }#margin-30px .square--left:before { content: "30px";width: 30px; }#margin-30px .square--right:before { content: "30px";width: 30px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin: 30px 60px;">margin: 30px 60px;</code></p><div class="example-description"><p>When using <strong>2</strong> values:</p><ul><li>the <strong>first</strong> value is for <strong>top/bottom</strong></li><li>the <strong>second</strong> value is for <strong>right/left</strong></li></ul><p>To remember the <strong>order</strong> think about the values you <strong>haven&#39;t defined</strong>.</p><p>If you enter <strong>2</strong> values (top/right), you <em>omit</em> setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin" id="margin-30px-60px"><div class="block block--pink">First item</div><div class="square square--top"></div><div class="container"><div class="square square--left"></div><div class="block block--alpha"><strong>Target</strong></div><div class="square square--right"></div></div><div class="square square--bottom"></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-30px-60px .square--top { height: 30px; }#margin-30px-60px .square--top:before { content: "30px"; }#margin-30px-60px .square--bottom { height: 30px; }#margin-30px-60px .square--bottom:before { content: "30px"; }#margin-30px-60px .square--left:before { content: "60px";width: 60px; }#margin-30px-60px .square--right:before { content: "60px";width: 60px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin: 30px 60px 45px;">margin: 30px 60px 45px;</code></p><div class="example-description"><p>When using <strong>3</strong> values:</p><ul><li>the <strong>first</strong> value is for <strong>top</strong></li><li>the <strong>second</strong> value is for <strong>right/left</strong></li><li>the <strong>third</strong> value is for <strong>bottom</strong></li></ul><p>To remember the <strong>order</strong> think about the values you <strong>haven&#39;t defined</strong>.</p><p>If you enter <strong>3</strong> values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin" id="margin-30px-60px-45px"><div class="block block--pink">First item</div><div class="square square--top"></div><div class="container"><div class="square square--left"></div><div class="block block--alpha"><strong>Target</strong></div><div class="square square--right"></div></div><div class="square square--bottom"></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-30px-60px-45px .square--top { height: 30px; }#margin-30px-60px-45px .square--top:before { content: "30px"; }#margin-30px-60px-45px .square--bottom { height: 45px; }#margin-30px-60px-45px .square--bottom:before { content: "45px"; }#margin-30px-60px-45px .square--left:before { content: "60px";width: 60px; }#margin-30px-60px-45px .square--right:before { content: "60px";width: 60px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="margin: 30px 60px 45px 85px;">margin: 30px 60px 45px 85px;</code></p><div class="example-description"><p>When using <strong>4</strong> values:</p><ul><li>the <strong>first</strong> value is for <strong>top</strong></li><li>the <strong>second</strong> value is for <strong>right</strong></li><li>the <strong>third</strong> value is for <strong>bottom</strong></li><li>the <strong>fourth</strong> value is for <strong>left</strong></li></ul><p>To remember the <strong>order</strong>, start at the <strong>top</strong> and go <strong>clockwise</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div margin" id="margin-30px-60px-45px-85px"><div class="block block--pink">First item</div><div class="square square--top"></div><div class="container"><div class="square square--left"></div><div class="block block--alpha"><strong>Target</strong></div><div class="square square--right"></div></div><div class="square square--bottom"></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#margin-30px-60px-45px-85px .square--top { height: 30px; }#margin-30px-60px-45px-85px .square--top:before { content: "30px"; }#margin-30px-60px-45px-85px .square--bottom { height: 45px; }#margin-30px-60px-45px-85px .square--bottom:before { content: "45px"; }#margin-30px-60px-45px-85px .square--left:before { content: "85px";width: 85px; }#margin-30px-60px-45px-85px .square--right:before { content: "60px";width: 60px; }</style></section></section><section id="max-height" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/max-height/" data-property-name="max-height" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="max-height">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/max-height" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#max-height"><span>#</span>max-height</a></h2><div class="property-description"><p>Defines the maximum height the element can be.</p></div></header><style type="text/css">.max-height { max-width: 400px; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="max-height: none;">max-height: none;</code></p><div class="example-description"><p>The element has <strong>no limit</strong> in terms of height.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div max-height" id="max-height-none"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div></div></aside></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="max-height: 2000px;">max-height: 2000px;</code></p><div class="example-description"><p>You can use <strong>numeric values</strong> like <strong>pixels</strong>, <strong>(r)em</strong>, <strong>percentages</strong>...</p><p>If the <em>maximum</em> height is <strong>larger</strong> than the element&#39;s <em>actual</em> height, the max height has <strong>no effect</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div max-height" id="max-height-2000px"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div></div></aside></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="max-height: 100px;">max-height: 100px;</code></p><div class="example-description"><p>If the content does not fit within the maximum height, it will <strong>overflow</strong>. How the container will handle this overflowing content is defined by the <code class="shorthand"><a href="http://cssreference.parryqiu.com/#overflow">overflow</a></code> property.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div max-height" id="max-height-100px"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div></div></aside><style type="text/css">#max-height-100px .block { max-height: 100px; }</style></section></section><section id="max-width" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/max-width/" data-property-name="max-width" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="max-width">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/max-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#max-width"><span>#</span>max-width</a></h2><div class="property-description"><p>Defines the maximum width the element can be.</p></div></header><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="max-width: none;">max-width: none;</code></p><div class="example-description"><p>The element has <strong>no limit</strong> in terms of width.</p></div></header><aside class="example-preview"
7299
;><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div max-width" id="max-width-none"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div></div></aside></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="max-width: 2000px;">max-width: 2000px;</code></p><div class="example-description"><p>You can use <strong>numeric values</strong> like <strong>pixels</strong>, <strong>(r)em</strong>, <strong>percentages</strong>...</p><p>If the <em>maximum</em> width is <strong>larger</strong> than the element&#39;s <em>actual</em> width, the max width has <strong>no effect</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div max-width" id="max-width-2000px"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div></div></aside></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="max-width: 150px;">max-width: 150px;</code></p><div class="example-description"><p>If the content does not fit within the maximum width, it will automatically change the <strong>height</strong> of the element to accomodate for the wrapping of the content.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div max-width" id="max-width-150px"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div></div></aside><style type="text/css">#max-width-150px .block { max-width: 150px; }</style></section></section><section id="min-height" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/min-height/" data-property-name="min-height" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="min-height">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/min-height" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#min-height"><span>#</span>min-height</a></h2><div class="property-description"><p>Defines the minimum height of the element.</p></div></header><style type="text/css">.min-height .block { max-width: 400px; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="min-height: 0;">min-height: 0;</code></p><div class="example-description"><p>The element has <strong>no minimum</strong> height.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div min-height" id="min-height-0"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum minimus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div></div></aside></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="min-height: 200px;">min-height: 200px;</code></p><div class="example-description"><p>You can use <strong>numeric values</strong> like <strong>pixels</strong>, <strong>(r)em</strong>, <strong>percentages</strong>...</p><p>If the <em>minimum</em> height is <strong>larger</strong> than the element&#39;s <em>actual</em> height, the min height will be applied.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div min-height" id="min-height-200px"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum minimus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div></div></aside><style type="text/css">#min-height-200px .block { min-height: 200px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="min-height: 5px;">min-height: 5px;</code></p><div class="example-description"><p>If the <em>minimum</em> height is <strong>smaller</strong> than the element&#39;s <em>actual</em> height, the min height has <strong>no effect</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div min-height" id="min-height-5px"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum minimus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div></div></aside><style type="text/css">#min-height-5px .block { min-height: 5px; }</style></section></section><section id="min-width" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/min-width/" data-property-name="min-width" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="min-width">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/min-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#min-width"><span>#</span>min-width</a></h2><div class="property-description"><p>Defines the minimum width of the element.</p></div></header><style type="text/css">.min-width .block { display: inline-block;vertical-align: top; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="min-width: 0;">min-width: 0;</code></p><div class="example-description"><p>The element has <strong>no minimum</strong> width.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div min-width" id="min-width-0"><p class="block block--alpha">Hello world</p></div></div></aside></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="min-width: 300px;">min-width: 300px;</code></p><div class="example-description"><p>You can use <strong>numeric values</strong> like <strong>pixels</strong>, <strong>(r)em</strong>, <strong>percentages</strong>...</p><p>If the <em>minimum</em> width is <strong>larger</strong> than the element&#39;s <em>actual</em> width, the min width will be applied.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div min-width" id="min-width-300px"><p class="block block--alpha">Hello world</p></div></div></aside><style type="text/css">#min-width-300px .block { min-width: 300px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="min-width: 5px;">min-width: 5px;</code></p><div class="example-description"><p>If the <em>minimum</em> width is <strong>smaller</strong> than the element&#39;s <em>actual</em> width, the min width has <strong>no effect</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div min-width" id="min-width-5px"><p class="block block--alpha">Hello world</p></div></div></aside><style type="text/css">#min-width-5px .block { min-width: 5px; }</style></section></section><section id="padding-bottom" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/padding-bottom/" data-property-name="padding-bottom" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="padding-bottom">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/padding-bottom" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#padding-bottom"><span>#</span>padding-bottom</a></h2><div class="property-description"><p>Defines the space <strong>inside</strong> the element, on the <strong>bottom</strong> side.</p></div></header><style type="text/css">.padding-bottom { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding: 0; }</style><style type="text/css">.padding-bottom .block { border-radius: 0;padding: 0; }.padding-bottom .block--alpha { position: relative; }.padding-bottom .box { bottom: 0;left: 0;position: absolute;right: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-bottom: 0;">padding-bottom: 0;</code></p><div class="example-description"><p>Removes any padding on the bottom.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-bottom" id="padding-bottom-0"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#padding-bottom-0 .box { display: none; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-bottom: 50px;">padding-bottom: 50px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-bottom" id="padding-bottom-50px"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#padding-bottom-50px .block--alpha { padding-bottom: 50px; }#padding-bottom-50px .box { height: 50px; }#padding-bottom-50px .box:before { content: "50px"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-bottom: 7em;">padding-bottom: 7em;</code></p><div class="example-description"><p>You can use <strong>(r)em</strong> values.</p><p>The value is <strong>relative</strong> to the font size:</p><ul><li><strong>em</strong>: relative to the <em>element</em>&#39;s current font size</li><li><strong>rem</strong>: relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>&#39;s font size</li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-bottom" id="padding-bottom-7em"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#padding-bottom-7em .block--alpha { padding-bottom: 7em; }#padding-bottom-7em .box { height: 7em; }#padding-bottom-7em .box:before { content: "7em"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-bottom: 30%;">padding-bottom: 30%;</code></p><div class="example-description"><p>You can use <strong>percentage</strong> values.<br>The percentage is based on the <em>width</em> of the <em>element</em>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-bottom" id="padding-bottom-30"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong></div><div class="block block--yellow">Third item</div><div class="box box--plum"></div></div></div></aside><style type="text/css">#padding-bottom-30 .block--alpha { padding-bottom: 30%; }#padding-bottom-30 .box { bottom: 1.2em;height: 60px;transform: rotate(-90deg) translateY(60px);transform-origin: bottom left;width: 30%; }#padding-bottom-30 .box:before { content: "30%"; }</style></section></section><section id="padding-left" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/padding-left/" data-property-name="padding-left" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="padding-left">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/padding-left" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#padding-left"><span>#</span>padding-left</a></h2><div class="property-description"><p>Defines the space <strong>inside</strong> the element, on the <strong>left</strong> side.</p></div></header><style type="text/css">.padding-left { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding: 0; }</style><style type="text/css">.padding-left .block { border-radius: 0;padding-left: 0; }.padding-left .block--alpha { position: relative; }.padding-left .box { bottom: 0;left: 0;position: absolute;top: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-left: 0;">padding-left: 0;</code></p><div class="example-description"><p>Removes any padding on the left.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-left" id="padding-left-0"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#padding-left-0 .box { display: none; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-left: 50px;">padding-left: 50px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-left" id="padding-left-50px"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#padding-left-50px .block--alpha { padding-left: 50px; }#padding-left-50px .box { width: 50px; }#padding-left-50px .box:before { content: "50px"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-left: 7em;">padding-left: 7em;</code></p><div class="example-description"><p>You can use <strong>(r)em</strong> values.</p><p>The value is <strong>relative</strong> to the font size:</p><ul><li><strong>em</strong>: relative to the <em>element</em>&#39;s current font size</li><li><strong>rem</strong>: relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>&#39;s font size</li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-left" id="padding-left-7em"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#padding-left-7em .block--alpha { padding-left: 7em; }#padding-left-7em .box { width: 7em; }#padding-left-7em .box:before { content: "7em"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-left: 30%;">padding-left: 30%;</code></p><div class="example-description"><p>You can use <strong>percentage</strong> values.<br>The percentage is based on the <em>width</em> of the <em>element</em>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-left" id="padding-left-30"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#padding-left-30 .block--alpha { padding-left: 30%; }#padding-left-30 .box { width: 30%; }#padding-left-30 .box:before { content: "30%"; }</style></section></section><section id="padding-right" class="property"><header class="property-header"><nav class="property-links"><a cla
8096
ss="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/padding-right/" data-property-name="padding-right" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="padding-right">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/padding-right" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#padding-right"><span>#</span>padding-right</a></h2><div class="property-description"><p>Defines the space <strong>inside</strong> the element, on the <strong>right</strong> side.</p></div></header><style type="text/css">.padding-right { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding: 0; }</style><style type="text/css">.padding-right .block { border-radius: 0;padding-right: 0;text-align: right; }.padding-right .block--alpha { position: relative; }.padding-right .box { bottom: 0;right: 0;position: absolute;top: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-right: 0;">padding-right: 0;</code></p><div class="example-description"><p>Removes any padding on the right.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-right" id="padding-right-0"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#padding-right-0 .box { display: none; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-right: 50px;">padding-right: 50px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-right" id="padding-right-50px"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#padding-right-50px .block--alpha { padding-right: 50px; }#padding-right-50px .box { width: 50px; }#padding-right-50px .box:before { content: "50px"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-right: 7em;">padding-right: 7em;</code></p><div class="example-description"><p>You can use <strong>(r)em</strong> values.</p><p>The value is <strong>relative</strong> to the font size:</p><ul><li><strong>em</strong>: relative to the <em>element</em>&#39;s current font size</li><li><strong>rem</strong>: relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>&#39;s font size</li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-right" id="padding-right-7em"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#padding-right-7em .block--alpha { padding-right: 7em; }#padding-right-7em .box { width: 7em; }#padding-right-7em .box:before { content: "7em"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-right: 30%;">padding-right: 30%;</code></p><div class="example-description"><p>You can use <strong>percentage</strong> values.<br>The percentage is based on the <em>width</em> of the <em>element</em>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-right" id="padding-right-30"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#padding-right-30 .block--alpha { padding-right: 30%; }#padding-right-30 .box { width: 30%; }#padding-right-30 .box:before { content: "30%"; }</style></section></section><section id="padding-top" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/padding-top/" data-property-name="padding-top" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="padding-top">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/padding-top" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#padding-top"><span>#</span>padding-top</a></h2><div class="property-description"><p>Defines the space <strong>inside</strong> the element, on the <strong>top</strong> side.</p></div></header><style type="text/css">.padding-top { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding: 0; }</style><style type="text/css">.padding-top .block { border-radius: 0;padding: 0; }.padding-top .block--alpha { position: relative; }.padding-top .box { left: 0;position: absolute;right: 0;top: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-top: 0;">padding-top: 0;</code></p><div class="example-description"><p>Removes any padding on the top.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-top" id="padding-top-0"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#padding-top-0 .box { display: none; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-top: 50px;">padding-top: 50px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-top" id="padding-top-50px"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#padding-top-50px .block--alpha { padding-top: 50px; }#padding-top-50px .box { height: 50px; }#padding-top-50px .box:before { content: "50px"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-top: 7em;">padding-top: 7em;</code></p><div class="example-description"><p>You can use <strong>(r)em</strong> values.</p><p>The value is <strong>relative</strong> to the font size:</p><ul><li><strong>em</strong>: relative to the <em>element</em>&#39;s current font size</li><li><strong>rem</strong>: relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>&#39;s font size</li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-top" id="padding-top-7em"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong><div class="box box--plum"></div></div><div class="block block--yellow">Third item</div></div></div></aside><style type="text/css">#padding-top-7em .block--alpha { padding-top: 7em; }#padding-top-7em .box { height: 7em; }#padding-top-7em .box:before { content: "7em"; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding-top: 30%;">padding-top: 30%;</code></p><div class="example-description"><p>You can use <strong>percentage</strong> values.<br>The percentage is based on the <em>width</em> of the <em>element</em>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding-top" id="padding-top-30"><div class="block block--pink">First item</div><div class="block block--alpha"><strong>Target</strong></div><div class="block block--yellow">Third item</div><div class="box box--plum"></div></div></div></aside><style type="text/css">#padding-top-30 .block--alpha { padding-top: 30%; }#padding-top-30 .box { height: 60px;top: 1.2em;transform: rotate(-90deg) translateX(-100%);transform-origin: top left;width: 30%; }#padding-top-30 .box:before { content: "30%"; }</style></section></section><section id="padding" class="property property--shorthand"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/padding/" data-property-name="padding" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="padding">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/padding" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#padding"><span>#</span>padding</a></h2><div class="property-description"><p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/padding-top" data-property-name="padding-top">padding-top</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/padding-right" data-property-name="padding-right">padding-right</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/padding-bottom" data-property-name="padding-bottom">padding-bottom</a></code> and <code class="shorthand"><a class="hash" href="{{site.url}}/property/padding-left" data-property-name="padding-left">padding-left</a></code>.</p></div></header><style type="text/css">.padding { background: #05ffb0;padding: 0; }</style><style type="text/css">.padding .block { padding: 0; }.padding .square { align-items: center;background: rgba(0,0,0,0.3);border-radius: 0;display: flex;height: auto;justify-content: center;width: auto; }.padding .container { align-items: stretch;display: flex; }.padding .block--alpha { flex-grow: 1;flex-shrink: 1; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding: 0;">padding: 0;</code></p><div class="example-description"><p>Removes all paddings.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding" id="padding-0"><div class="square square--top"></div><div class="container"><div class="square square--left"></div><div class="block block--alpha"><strong>Target</strong></div><div class="square square--right"></div></div><div class="square square--bottom"></div></div></div></aside><style type="text/css">#padding-0 .box { display: none; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding: 30px;">padding: 30px;</code></p><div class="example-description"><p>When using <strong>1</strong> value, the padding is set for <strong>all 4 sides</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding" id="padding-30px"><div class="square square--top"></div><div class="container"><div class="square square--left"></div><div class="block block--alpha"><strong>Target</strong></div><div class="square square--right"></div></div><div class="square square--bottom"></div></div></div></aside><style type="text/css">#padding-30px .square--top { height: 30px; }#padding-30px .square--top:before { content: "30px"; }#padding-30px .square--bottom { height: 30px; }#padding-30px .square--bottom:before { content: "30px"; }#padding-30px .square--left:before { content: "30px";width: 30px; }#padding-30px .square--right:before { content: "30px";width: 30px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding: 30px 60px;">padding: 30px 60px;</code></p><div class="example-description"><p>When using <strong>2</strong> values:</p><ul><li>the <strong>first</strong> value is for <strong>top/bottom</strong></li><li>the <strong>second</strong> value is for <strong>right/left</strong></li></ul><p>To remember the <strong>order</strong> think about the values you <strong>haven&#39;t defined</strong>.</p><p>If you enter <strong>2</strong> values (top/right), you <em>omit</em> setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding" id="padding-30px-60px"><div class="square square--top"></div><div class="container"><div class="square square--left"></div><div class="block block--alpha"><strong>Target</strong></div><div class="square square--right"></div></div><div class="square square--bottom"></div></div></div></aside><style type="text/css">#padding-30px-60px .square--top { height: 30px; }#padding-30px-60px .square--top:before { content: "30px"; }#padding-30px-60px .square--bottom { height: 30px; }#padding-30px-60px .square--bottom:before { content: "30px"; }#padding-30px-60px .square--left:before { content: "60px";width: 60px; }#padding-30px-60px .square--right:before { content: "60px";width: 60px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding: 30px 60px 45px;">padding: 30px 60px 45px;</code></p><div class="example-description"><p>When using <strong>3</strong> values:</p><ul><li>the <strong>first</strong> value is for <strong>top</strong></li><li>the <strong>second</strong> value is for <strong>right/left</strong></li><li>the <strong>third</strong> value is for <strong>bottom</strong></li></ul><p>To remember the <strong>order</strong> think about the values you <strong>haven&#39;t defined</strong>.</p><p>If you enter <strong>3</strong> values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding" id="padding-30px-60px-45px"><div class="square square--top"></div><div class="container"><div class="square square--left"></div><div class="block block--alpha"><strong>Target</strong></div><div class="square square--right"></div></div><div class="square square--bottom"></div></div></div></aside><style type="text/css">#padding-30px-60px-45px .square--top { height: 30px; }#padding-30px-60px-45px .square--top:before { content: "30px"; }#padding-30px-60px-45px .square--bottom { height: 45px; }#padding-30px-60px-45px .square--bottom:before { content: "45px"; }#padding-30px-60px-45px .square--left:before { content: "60px";width: 60px; }#padding-30px-60px-45px .square--right:before { content: "60px";width: 60px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="padding: 30px 60px 45px 85px;">padding: 30px 60px 45px 85px;</code></p><div class="example-description"><p>When using <strong>4</strong> values:</p><ul><li>the <strong>first</strong> value is for <strong>top</strong></li><li>the <strong>second</strong> value is for <strong>right</strong></li><li>the <strong>third</strong> value is for <strong>bottom</strong></li><li>the <strong>fourth</strong> value is for <strong>left</strong></li></ul><p>To remember the <strong>order</strong>, start at the <strong>top</strong> and go <strong>clockwise</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div padding" id="padding-30px-60px-45px-85px"><div class="square square--top"></div><div class="container"><div class="square square--left"></div><div class="block block--alpha"><strong>Target</strong></div><div class="square square--right"></div></div><div class="square square--bottom"></div></div></div></aside><style type="text/css">#padding-30px-60px-45px-85px .square--top { height: 30px; }#padding-30px-60px-45px-85px .square--top:before { content: "30px"; }#padding-30px-60px-45px-85px .square--bottom { height: 45px; }#padding-30px-60px-45px-85px .square--bottom:before { content: "45px"; }#padding-30px-60px-45px-85px .square--left:before { content: "85px";width: 85px; }#padding-30px-60px-45px-85px .square--right:before { content: "60px";width: 60px; }</style></section></section><section id="width" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/box-model/">In collection: <strong>box-model</strong> </a><a class="property-links-direct" href="{{site.url}}/property/width/" data-property-name="width" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="width">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#width"><span>#</span>width</a></h2><div class="property-description"><p>Defines the width of the element.</p></div></header><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="这是属性的默认值">默认属性</code> <code class="example-value" data-tooltip="点击复制" data-clipboard-text="width: auto;">width: auto;</code></p><div class="example-description"><p>The element will <strong>automatically</strong> adjust its width to allow its content to be displayed correctly.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div width block block--alpha" id="width-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</div></div></aside><style type="text/css">#width-auto{ width:auto;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="width: 240px;">width: 240px;</code></p><div class="example-description"><p>You can use <strong>numeric values</strong> like <strong>pixels</strong>, <strong>(r)em</strong>, <strong>percentages</strong>...</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div width block block--alpha" id="width-240px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</div></div></aside><style type="text/css">#width-240px{ width:240px;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="点击复制" data-clipboard-text="width: 50%;">width: 50%;</code></p><div class="example-description"><p>If you use <strong>percentages</strong>, the value is relative to the container&#39;s width.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div width block block--alpha" id="width-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</div></div></aside><style type="text/css">#width-50{ width:50%;}</style></section></section>