网站开发求助：视频需贴合容器上下边缘（两侧留空）

Got it, that tiny gap under your video is a super common quirk—usually caused by how inline/inline-block elements like <video> are aligned to the text baseline by default. Let's fix it while keeping your desired left/right spacing. Here are a few simple solutions:

Solution 1: Make the Video a Block Element #

Changing the video to display: block eliminates the baseline alignment gap, and we'll use container padding for your left/right spacing:

<div style="background-color:#B9CFBB; padding: 0 20px; text-align: center;">
  <video width="360" height="240" controls style="display: block; margin: 0 auto;">
    <source src="xxxxxx">
    Your browser does not support the video tag.
  </video>
</div>

• padding: 0 20px adds your desired left/right space without affecting top/bottom alignment
• display: block removes the baseline gap
• margin: 0 auto keeps the video centered in the container

Solution 2: Zero Out the Container's Line Height #

If you prefer keeping the video as an inline element, setting the container's line-height: 0 will collapse the extra space:

<div style="background-color:#B9CFBB; text-align: center; line-height: 0; padding: 0 20px;">
  <video width="360" height="240" controls>
    <source src="xxxxxx">
    Your browser does not support the video tag.
  </video>
</div>

• line-height: 0 gets rid of the space reserved for text descenders (like the bottom of a 'g')
• Again, padding: 0 20px maintains your left/right spacing

Solution 3: Use Flexbox (Modern & Clean) #

Flexbox makes centering and spacing a breeze, and it automatically avoids the baseline gap:

<div style="background-color:#B9CFBB; display: flex; justify-content: center; padding: 0 20px;">
  <video width="360" height="240" controls>
    <source src="xxxxxx">
    Your browser does not support the video tag.
  </video>
</div>

• display: flex turns the container into a flex parent
• justify-content: center centers the video horizontally
• No extra gap issues here, and your left/right padding stays intact

All three solutions will make the video sit flush against the top and bottom of your green container while keeping the side spacing you want. If you still see a gap, double-check that there aren't any global CSS styles adding margin/padding to <video> or <div> elements—you can add margin: 0 to the video style if needed.

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