SarahElson

<section class="section">
  <h2>Flexbox with gap!</h2>

  <!-- Start flexbox layout -->
  <div class="flex flex-gap">
    <div class="item content">Item</div>
    <div class="item content">Longer Item</div>
    <div class="item content">Even Longer Item</div>
    <div class="item content">Item</div>
    <div class="item content">Longer Item</div>

SarahElson

<div class="section">
  <h1>CSS Grid Layout with Gap</h1>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>

SarahElson

<div class="section">
  <h1>CSS Grid Layout with Gap</h1>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>

SarahElson

<div class="container">
  <h1>Margin collapsing in CSS</h1>
  <!--  Normal container  -->
  <div class="sub-container">
    <div class="box-normal">
      <h2>Normal Container</h2>
      <p class="first-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque illo quod praesentium porro hic voluptatibus ex consequatur. Nam, quisquam excepturi.</p>
      <p class="second-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque illo quod praesentium porro hic voluptatibus ex consequatur. Nam, quisquam excepturi.</p>
    </div>

SarahElson

<section class="container">
  <h1>Spacing with column layout</h1>
  <article>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure ratione dolor et quas modi aut aperiam accusantium, 
    commodi nisi facere libero reprehenderit ducimus nemo amet dolores recusandae harum architecto. Minima et explicabo similique. 
    Qui itaque praesentium dignissimos aperiam tenetur quod ex natus modi, possimus voluptatem exercitationem iste non dolorum at 
    corporis nostrum beatae debitis fugiat? Beatae, ducimus! Omnis consequuntur, quos officiis doloribus assumenda libero debitis 
    impedit pariatur cupiditate quasi amet aspernatur incidunt nihil suscipit possimus similique sed dolore veniam deserunt molestiae 
    facilis ipsam eius tempore. Tenetur iste atque assumenda eos similique a ipsam. Molestias nihil officiis necessitatibus temporibus 
    harum eos?
  </article>

SarahElson

<div class="container">
  <h1>Spacing with Text</h1>

  <div class="normal-text">
    <h2>Normal text</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta veritatis in beatae doloremque ipsa qui odit quas dolorem. Ad, quaerat?</p>
  </div>

  <!--  LINE HEIGHT  -->
  <div class="line__height--with">

SarahElson

<div class="container">
  <h1>Internal Spacing or Padding</h1>

  <div class="box">
    <div class="p-top">
      <div></div>
      <p>padding-top: 30px;</p>
    </div>

    <div class="p-right">

SarahElson

<div class="container">
  <h1>External Spacing or Margin</h1>

  <div class="box">
    <div class="m-top">
      <div></div>
      <div></div>
      <p>margin-top: 60px;</p>
    </div>

SarahElson

<div class="container">
  <div class="min-container">
    <h2>Applying min() to set gap</h2>
    <div>Item-1</div>
    <div>Item-2</div>
    <div>Item-3</div>
    <div>Item-4</div>
    <div>Item-5</div>
  </div>