无法覆盖用户代理样式表中输入范围的边距

Question

我创建了一个视频搜索栏，当鼠标悬停在视频上时，会根据鼠标的x位置更新帧。我遇到的问题是使用输入范围的用户代理样式表。

视频底部与其下方的输入范围之间有一个空格。这个空间似乎来自用户代理表中的2px边距。虽然我能够编辑输入范围的边距，但这似乎并没有摆脱这个边际。

我已尝试消除-webkit-slider-runnable-track伪选择器上的边距，即使我没有使用它。我也试过消除视频和拇指上的边距。使用!important无效。

将输入设置为display：none删除输入和空格。保证金不是来自视频。包含div不是flexbox，而是display：block。 html中没有多余的空格。

注意：这只需要在Chrome上运行。

HTML：

<div>
    <video ...video stuff here...>
        <source ng-src="/some_url" type="video/mp4">
    </video>
    <input type="range" min="0" max="100" ng-model="scanPosition" step="1" />
</div>

CSS：

input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    background: transparent;  /*Otherwise white in Chrome */
    border: 1px solid #0a0a0a;
    background-color: #227ea7;
    height: 4px;
    width: 100%;
    margin: 0px !important;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #0a0a0a;
    background: #4f4f4f;
    width: 2%;
    height: 4px;
}