index.html

--- layout: single property_name: margin-right ---<section id="margin-right" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/margin-right/" data-property-name="margin-right" data-tooltip="Single page for this property" target="_blank">Link</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="{{site.url}}/#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="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" 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="Click to copy" 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="Click to copy" 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="Click to copy" 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="Click to copy" 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>