index.html

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