今天用Chrome浏览器调整一段网页代码，发现某个位置的视频始终要距离左边留白一段，然而我并没有设置过这个东西，这个留白是怎么产生的呢？

于是右键检查，定位到这个UL标签，如下图：

样式表中，赫然写着：

padding-inline-start: 40px;

定义来自于 用户代理样式表。这是个什么东西呢？该怎么理解呢？

要说起源，就得从css规范中去寻找了，我并不打算在这个问题上做史学研究，追根溯源。我只要明白它什么意思、怎么解决问题就好。

用户代理样式表的含义

html中支持很多标签，同样的标签，每个浏览器的默认定义风格不同。比如我编了段非常简单的html代码：

test

整个htm文件就这一句话，没有任何的样式。然而同样是

标签，不同浏览器计算的大小是不同的：

Chrome与Edge是一致的，这也充分说明了Edge跟Chrome用的内核是一样的：

布局大小

用户代理样式

Firefox：

IE：

由于FireFox和IE都没有用户代理样式的功能，所以无法对比他们的不同。但通过布局可以看到他们默认的用户代理样式是不同的。

现在你应该明白了吧，所谓的用户代理样式就是如果你不指定标签的样式，那么就采用浏览器默认的样式，这个浏览器默认的样式就叫用户代理样式表。

修复用户代理样式表带来的影响

我们做程序，肯定是希望不管用户是什么浏览器，看到的内容都尽量保持一样的才好，那要怎么解决呢？其实很简单，只要在css文件中，把所有常用元素的尺寸全部重新定义一遍，基本就可以了。

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}

再次运行代码，发现已经左边距已经变成0了。