如何删除 div 和 svg 之间的间距以及 svg 下的间隙

Question

快速提问，我如何删除第一个 svg (.top) 和 div (#section1) 之间的间距以及第二个 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>

Answer 1

您可以在 SVG 上应用 display: block（或任何 not-inline）来消除间隙。

@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>

Answer 2

使 class 顶部显示：网格对我有用

     .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 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>

<!-- end snippet -->

如何删除 div 和 svg 之间的间距以及 svg 下的间隙

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

html

css

svg