标头和形状分隔符之间的HTML / CSS间距

问题描述

我在标头下面使用了shapedivider.app，它们之间的间隙很小但很奇怪。

有人知道如何摆脱它吗？我也正在使用tailwindcss。

.custom-shape-divider-top-1599136518 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-top-1599136518 svg {
    position: relative;
    display: block;
    width: calc(166% + 1.3px);
    height: 85px;
}

.custom-shape-divider-top-1599136518 .shape-fill {
    fill: #1A202C;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<body class="m-0 bg-gray-800 text-white">
  <div class="m-0 p-0">
      <header class="bg-gray-900 p-5 m-0">
          <nav class="font-mont m-0">
              <ul class="flex justify-between items-center w-full">
                  <li class="text-decoration-none p-2 uppercase font-bold text-2xl"><a href="#">human trafficking</a></li>
                  <div class="flex">
                      <li class="text-decoration-none p-2"><a href="./html/theProject.html">the project</a></li>
                      <li class="text-decoration-none p-2"><a href="./html/aboutUs.html">about us</a></li>
                      <li class="m-0 p-0"><button class="text-decoration-none bg-gray-700 hover:bg-green-600 py-2 px-6 mx-2 rounded-full">contact</button></li>
                  </div>
              </ul>
          </nav>
      </header>
      <div class="relative bg-gray-900">
          <div class="custom-shape-divider-top-1599136518">
              <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
                      <path d="M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z" class="shape-fill"></path>
                  </svg>
          </div>
      </div>
  </div>
</body>

解决方法

尝试删除header和div之间的折线。像</header><div ...>

这在SVG上经常发生。一个非常简单的解决方案是添加一个负边距或transform: translateY(-2px);。

对您来说，它看起来像这样：

.custom-shape-divider-top-1599136518 {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: translateY(-2px) rotate(180deg);
}

或者使用top: 0;代替top: -2px;

bootstrap-4 html twitter-bootstrap