<![CDATA[
<p><span style="color: #333333;" data-ke-size="size18"><!DOCTYPE html></span></p><p><span style="color: #333333;" data-ke-size="size18"><html lang="en"></span></p><p><span style="color: #333333;" data-ke-size="size18">  <head></span></p><p><span style="color: #333333;" data-ke-size="size18">    <meta charset="UTF-8" /></span></p><p><span style="color: #333333;" data-ke-size="size18">    <meta http-equiv="X-UA-Compatible" content="IE=edge" /></span></p><p><span style="color: #333333;" data-ke-size="size18">    <meta name="viewport" content="width=device-width, initial-scale=1.0" /></span></p><p><span style="color: #333333;" data-ke-size="size18">    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" /></span></p><p><span style="color: #333333;" data-ke-size="size18">    <title>Bootstrap Sandbox | Spacing</title></span></p><p><span style="color: #333333;" data-ke-size="size18">  </head></span></p><p><span style="color: #333333;" data-ke-size="size18">  <body></span></p><p><span style="color: #333333;" data-ke-size="size18">    <div class="container"></span></p><p><span style="color: #333333;" data-ke-size="size18">      <h1 class="mb-5">Spacing</h1></span></p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Margin All --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-dark <b><span style="color: #006dd7;">m-1</span></b>">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-dark m-2">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-dark m-3">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-dark m-4">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-dark m-5">Lorem, ipsum dolor.</div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Margin Top & Bottom --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-success <b><span style="color: #006dd7;">my-1</span></b>">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-success my-2">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-success my-3">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-success my-4">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-success my-5">Lorem, ipsum dolor.</div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Margin Left & Right --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-secondary <b><span style="color: #006dd7;">mx-1</span></b>">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-secondary mx-2">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-secondary mx-3">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-secondary mx-4">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-secondary mx-5">Lorem, ipsum dolor.</div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <br /><br /></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Margin Top --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-danger <b><span style="color: #006dd7;">mt-1</span></b>">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-danger mt-2">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-danger mt-3">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-danger mt-4">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-danger mt-5">Lorem, ipsum dolor.</div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <br /><br /></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Margin Bottom --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-warning <b><span style="color: #006dd7;">mb-1</span></b>">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-warning mb-2">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-warning mb-3">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-warning mb-4">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-warning mb-5">Lorem, ipsum dolor.</div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <br /><br /></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Margin Left/Start --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-info <b><span style="color: #006dd7;">ms-1</span></b>">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-info ms-2">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-info ms-3">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-info ms-4">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-info ms-5">Lorem, ipsum dolor.</div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <br /><br /></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Margin Right/End --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-dark <b><span style="color: #006dd7;">me-1</span></b>">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-dark me-2">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-dark me-3">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-dark me-4">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-dark me-5">Lorem, ipsum dolor.</div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <br /><br /></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Margin Auto --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-warning w-50 <b><span style="color: #006dd7;">m-auto</span></b>">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-warning w-50 my-auto">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-warning w-50 mx-auto">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-warning w-50 ms-auto">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-warning w-50 me-auto">Lorem, ipsum dolor.</div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <br /><br /></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Padding All --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-dark my-2<b><span style="color: #006dd7;"> p-1</span></b>">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-dark my-2 p-2">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-dark my-2 p-3">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-dark my-2 p-4">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-dark my-2 p-5">Lorem, ipsum dolor.</div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <br /><br /></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Padding Top & Bottom --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-success my-2 <b><span style="color: #006dd7;">py-1</span></b>">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-success my-2 py-2">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-success my-2 py-3">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-success my-2 py-4">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-success my-2 py-5">Lorem, ipsum dolor.</div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <br /><br /></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Padding Left & Right --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-danger my-2 <b><span style="color: #006dd7;">px-1</span></b>">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-danger my-2 px-2">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-danger my-2 px-3">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-danger my-2 px-4">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-danger my-2 px-5">Lorem, ipsum dolor.</div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <br /><br /></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Padding Top --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-primary my-2<b><span style="color: #006dd7;"> pt-1</span></b>">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-primary my-2 pt-2">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-primary my-2 pt-3">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-primary my-2 pt-4">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-primary my-2 pt-5">Lorem, ipsum dolor.</div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <br /><br /></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Padding Bottom --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-info my-2 <b><span style="color: #006dd7;">pb-1</span></b>">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-info my-2 pb-2">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-info my-2 pb-3">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-info my-2 pb-4">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-info my-2 pb-5">Lorem, ipsum dolor.</div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <br /><br /></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Padding Left/Start --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-warning my-2 <b><span style="color: #006dd7;">ps-1</span></b>">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-warning my-2 ps-2">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-warning my-2 ps-3">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-warning my-2 ps-4">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-warning my-2 ps-5">Lorem, ipsum dolor.</div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <br /><br /></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Padding Right/End --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-primary my-2 <b><span style="color: #006dd7;">pe-1</span></b>">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-primary my-2 pe-2">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-primary my-2 pe-3">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-primary my-2 pe-4">Lorem, ipsum dolor.</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="text-bg-primary my-2 pe-5">Lorem, ipsum dolor.</div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <br /><br /></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <!-- Stacks --></span></p><p><span style="color: #333333;" data-ke-size="size18">      <div class="<b><span style="color: #006dd7;">vstack gap-3</span></b>"></span></p><p><span style="color: #333333;" data-ke-size="size18">        <div class="p-2 bg-info">First item</div></span></p><p><span style="color: #333333;" data-ke-size="size18">        <div class="p-2 bg-info">Second item</div></span></p><p><span style="color: #333333;" data-ke-size="size18">        <div class="p-2 bg-info">Third item</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      </div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">      <div class="<b><span style="color: #006dd7;">hstack</span></b> gap-5"></span></p><p><span style="color: #333333;" data-ke-size="size18">        <div class="p-2 text-bg-success">First item</div></span></p><p><span style="color: #333333;" data-ke-size="size18">        <div class="p-2 text-bg-success">Second item</div></span></p><p><span style="color: #333333;" data-ke-size="size18">        <div class="p-2 text-bg-success">Third item</div></span></p><p><span style="color: #333333;" data-ke-size="size18">      </div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">    </div></span></p><p><span style="color: #333333;" data-ke-size="size18">    <div style="margin-top: 350px"></div></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">    <script src="./assets/js/bootstrap.bundle.min.js"></script></span></p><p><span style="color: #333333;" data-ke-size="size18">  </body></span></p><p><span style="color: #333333;" data-ke-size="size18"></html></span></p>
<!-- -->
]]>
카페 게시글
CSS
bootstrap
Spacing
주인장
추천 0
조회 12
24.12.08 18:56
댓글 0
다음검색
