HTML中<video>标签左侧1px黑边框的去除方法咨询

AI 小北

2026-5-20

Fixing the Mysterious 1px Left Black Border on HTML <video> Elements

Hey there! Let's tackle that annoying 1px left black border on your <video> tag—even when you haven't set any border or outline CSS properties. Here are the most common fixes to try:

Reset default browser styles for the video element
Browsers often apply subtle default margins, paddings, or inline display behaviors that can create unexpected visual gaps or borders. Add this CSS to override those defaults:
```
video {
  margin: 0;
  padding: 0;
  display: block; /* Eliminates inline-block whitespace gaps */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
```
Ensure perfect width matching with the parent container
Sometimes fractional pixel widths (from percentage-based layouts) can cause browsers to render a tiny 1px "border" as a rounding artifact. Force the video to fill its parent container exactly:
```
video {
  width: 100%;
  height: auto;
  object-fit: cover; /* Adjust to match your layout needs—cover/fill/contain */
}
```
If you're using a flex or grid layout, double-check that the parent container doesn't have hidden padding or overflow that's pushing the video slightly off.
Check the video source itself
Rarely, the issue might be in the video file itself—some encoding processes can leave a thin 1px black edge on one side. Try previewing the video in a media player to rule this out.
Override inherited styles from parent elements
Even if you haven't set borders on the video, a parent container might have a border-left or padding-left that's bleeding through. Inspect the parent element in your browser's dev tools and adjust its styles if needed.