如何消除网站iPad尺寸下SVG下方的微小间隙？

I see you're using ShapeDivider App for your section dividers and ran into that annoying tiny gap on iPad-sized screens—even after setting display: block on the SVG. Let's break down why this happens and fix it.

Why the Gap Exists #

This is usually caused by inline element spacing or subtle CSS defaults. Even if you set display: block on the SVG, the parent container might still have leftover line-height or the SVG could be inheriting vertical-align properties that create that tiny space. Also, the preserveAspectRatio="none" on your SVG might be causing minor layout shifts on specific viewport sizes.

Step-by-Step Fixes #

1. Reset Font & Line-Height on the Divider Container
   The divider container already has line-height: 0, but adding font-size: 0 will eliminate any hidden font-related spacing that might be contributing to the gap:

   .custom-shape-divider-bottom-1600301955 {
       position: absolute;
       display: block;
       bottom: 0;
       left: 0;
       width: 100%;
       overflow: hidden;
       line-height: 0;
       transform: rotate(180deg);
       font-size: 0; /* Add this to kill font-based spacing */
   }
   

2. Force Vertical Alignment on the SVG
   Some browsers still render SVGs with a tiny baseline gap even when set to display: block. Adding vertical-align: top will clamp the SVG tightly to the container bottom:

   .custom-shape-divider-bottom-1600301955 svg {
       position: relative;
       display: block;
       width: calc(100% + 1.3px);
       height: 100px;
       vertical-align: top; /* Add this to eliminate baseline shift */
   }
   

3. Tweak SVG ViewBox for Consistent Scaling
   Your SVG's viewBox is set to 0 0 1200 120, but your divider height is 100px. Matching the viewBox height to your divider height prevents minor scaling inconsistencies that can create gaps:

   <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 100" preserveAspectRatio="none">
       <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
   </svg>
   

4. Double-Check Parent Container Layout
   Ensure your .hero section has no unintended bottom padding/margin. Since it's set to position: relative, the absolute-positioned divider should sit flush against its bottom edge—no extra spacing should be present here.

Modified Code Snippets #

Here's the updated CSS for your divider:

.custom-shape-divider-bottom-1600301955 {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    font-size: 0;
}

.custom-shape-divider-bottom-1600301955 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
    vertical-align: top;
}

And the adjusted SVG in your HTML:

<div class="custom-shape-divider-bottom-1600301955">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 100" preserveAspectRatio="none">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
    </svg>
</div>

Testing the Fix #

After applying these changes, test on iPad-sized viewports again. The combination of font-size: 0, vertical-align: top, and adjusted viewBox should eliminate that tiny gap. If it's still there, try temporarily removing the calc() from the SVG width and using width: 100%—sometimes the pixel calculation can cause rounding errors on specific screen sizes.

内容的提问来源于stack exchange，提问作者Oscar Florian