index.html

---
layout: single
property_name: margin-bottom
---

<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="This is the property's default value"
          >default</code
        >

        <code
          class="example-value"
          data-tooltip="Click to copy"
          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="Click to copy"
          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="Click to copy"
          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="Click to copy"
          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>