How to remove spacing between div and svg and gap under svg

Issue

Quick question, how do i remove that spacing between the first svg (.top) and the div (#section1) and also the little gap under the second svg (.bottom)

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.section {
    background: rgb(43, 43, 43);
    margin: 0;
}

.section .wrapper {
    height: 330px;
    display: flex;
    flex-direction: row;
    padding: 40px 50px;
}

.section .left {
    display: flex;
}

.section .right {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: right;
}

.section .title {
    color: white;
    font-weight: 600;
    font-size: 80px;
    margin-bottom: 20px;
}

.section .description {
    color: white;
    margin-bottom: 50px;
}

.section .fa-solid {
    color: white;
}

svg.top {
    display: block;
}

svg.bottom {
    display: block;
}
<div class="top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="rgb(43, 43, 43)" fill-opacity="1" d="M0,128L80,149.3C160,171,320,213,480,202.7C640,192,800,128,960,90.7C1120,53,1280,43,1360,37.3L1440,32L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
  </svg>
</div>
<div class="section" id="section1">
  <div class="wrapper">
    <div class="left">
      <i class="fa-solid fa-language fa-10x"></i>
    </div>
    <div class="right">
      <h1 class="title">Title</h1>
      <p class="description">Description</p>
    </div>
  </div>
  <div class="bottom">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path fill="#fff" fill-opacity="1" d="M0,128L80,149.3C160,171,320,213,480,202.7C640,192,800,128,960,90.7C1120,53,1280,43,1360,37.3L1440,32L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
    </svg>
  </div>
</div>

Solution

You can apply display: block (or anything not-inline) on SVG to remove gap.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

svg {
  display: block;
}

.section {
    background: rgb(43, 43, 43);
    margin: 0;
}

.section .wrapper {
    height: 330px;
    display: flex;
    flex-direction: row;
    padding: 40px 50px;
}

.section .left {
    display: flex;
}

.section .right {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: right;
}

.section .title {
    color: white;
    font-weight: 600;
    font-size: 80px;
    margin-bottom: 20px;
}

.section .description {
    color: white;
    margin-bottom: 50px;
}

.section .fa-solid {
    color: white;
}

svg.top {
    display: block;
}

svg.bottom {
    display: block;
}
<div class="top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="rgb(43, 43, 43)" fill-opacity="1" d="M0,128L80,149.3C160,171,320,213,480,202.7C640,192,800,128,960,90.7C1120,53,1280,43,1360,37.3L1440,32L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
  </svg>
</div>
<div class="section" id="section1">
  <div class="wrapper">
    <div class="left">
      <i class="fa-solid fa-language fa-10x"></i>
    </div>
    <div class="right">
      <h1 class="title">Title</h1>
      <p class="description">Description</p>
    </div>
  </div>
  <div class="bottom">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path fill="#fff" fill-opacity="1" d="M0,128L80,149.3C160,171,320,213,480,202.7C640,192,800,128,960,90.7C1120,53,1280,43,1360,37.3L1440,32L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
    </svg>
  </div>
</div>

Answered By – Jax-p

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.