使用CSS来消除你的边距和边界

今天的网络浏览器已经走过了疯狂的日子,任何一种跨浏览器一致性都是一厢情愿的想法。 今天的网页浏览器都非常符合标准。 他们在一起很好地发挥作用,并在各种浏览器中提供相当一致的页面显示。 这包括最新版本的Google Chrome,Microsoft Edge,Mozilla Firefox,Opera,Safari以及当今用于访问网站的无数移动设备上的各种浏览器。

虽然在网络浏览器和它们如何显示CSS方面已经取得了进展,但这些不同的软件选项仍然存在不一致之处。 常见的不一致之处在于这些浏览器默认情况下如何计算边距,填充和边框。

由于盒子模型的这些方面会影响所有HTML元素,并且由于它们对于创建页面布局非常重要,所以不一致的显示意味着一个页面在一个浏览器中可能看起来很棒,但在另一个浏览器中稍微偏离。 为了解决这个问题,许多网页设计师规范了盒子模型的这些方面。 这种做法也被称为“归零”边距,填充和边框的值。

关于浏览器默认值的说明

Web浏览器都有默认设置,用于页面的某些显示方面。 例如,超链接默认为蓝色并带下划线。 这在各种浏览器中都是一致的,尽管大多数设计人员为了适应他们特定项目的设计需求而进行了更改,但事实上他们都以相同的默认值开始,这使得更容易进行这些更改。 令人遗憾的是,边距,填充和边框的默认值不能享受相同级别的跨浏览器一致性。

标准化边距和填充值

解决盒子模型不一致问题的最好方法是将HTML元素的所有边距和填充值设置为零。 有几种方法可以做到这一点,即将CSS规则添加到样式表中:

* {margin:0; 填充:0; }

这个CSS规则使用*或通配符。 该字符意味着“所有元素”,并且它基本上会选择每个HTML元素并将边距和填充设置为0.即使此规则非常不明确,因为它在您的外部样式表中,它将比默认浏览器具有更高的特异性值做。 由于这些默认值就是你正在覆盖的东西,所以这种风格将会完成你正在设定的任务。

另一种选择是将这些值应用于HTML和body元素。 因为页面上的所有其他元素都是这两个元素的子元素,CSS级联应将这些值应用于所有其他元素。

html,body {margin:0; 填充:0; }

这将在所有浏览器的相同位置开始您的设计,但有一点需要记住的是,只要您关闭了所有边距和填充,您就需要选择性地将它们重新打开以用于网页的特定部分以实现外观并觉得你的设计要求。

国界

你可能会想“但默认情况下没有浏览器在body元素周围有一个边框”。 这不完全正确。 较旧版本的Internet Explorer在元素周围有一个透明或不可见的边框。 除非将边框设置为0,否则该边框可能会弄乱您的页面布局。 如果您已决定继续支持这些过时的IE版本,则需要将以下内容添加到您的正文和HTML样式中:

HTML,body {
margin:0px;
padding:0px;
border:0px;
}

与您如何关闭边距和填充类似,这种新样式也会关闭默认边框。 您也可以使用本文前面显示的通配符选择器来做同样的事情。

Jennifer Krynin的原创文章。 由杰里米吉拉德在9/27/16编辑。