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

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 >
  <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  id="section1">
  <div >
    <div >
      <i ></i>
    </div>
    <div >
      <h1 >Title</h1>
      <p >Description</p>
    </div>
  </div>
  <div >
    <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>

CodePudding user response：

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 >
  <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  id="section1">
  <div >
    <div >
      <i ></i>
    </div>
    <div >
      <h1 >Title</h1>
      <p >Description</p>
    </div>
  </div>
  <div >
    <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>

CodePudding user response：

Make the class top display: grid worked for me

     .top{
display: grid;
     }
    .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;
    }

<!-- language: lang-html -->

    <div >
      <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  id="section1">
      <div >
        <div >
          <i ></i>
        </div>
        <div >
          <h1 >Title</h1>
          <p >Description</p>
        </div>
      </div>
      <div >
        <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>

<!-- end snippet -->