Skip to main content

使用CSS将你的边距和边框归零

Anonim

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

虽然在Web浏览器以及它们如何显示CSS方面肯定取得了进展,但这些不同的软件选项之间仍然存在不一致。其中一个常见的不一致是默认情况下这些浏览器如何计算边距,填充和边框。

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

关于浏览器默认值的注释

Web浏览器都具有页面某些显示方面的默认设置。例如,默认情况下,超链接为蓝色并带下划线。这在各种浏览器中都是一致的,尽管大多数设计师都会根据其特定项目的设计需求进行更改,但事实上它们都是以相同的默认值开始,因此更容易进行这些更改。遗憾的是,边距,填充和边框的默认值不具有相同级别的跨浏览器一致性。

规范化边距和填充的值

解决不一致框模型问题的最佳方法是将HTML元素的所有边距和填充值设置为零。您可以通过以下几种方法将此CSS规则添加到样式表中:

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

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

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

国界

您可能会想“但默认情况下没有浏览器在body元素周围有边框”。这不是严格意义上的。较早版本的Internet Explorer在元素周围具有透明或不可见的边框。除非您将边框设置为0,否则该边框可能会弄乱您的页面布局。如果您已决定继续支持这些过时的IE版本,则需要通过在您的身体和HTML样式中添加以下内容来解决此问题:

HTML,body {保证金:0px;填充:0px; 边框:0px;}

与关闭边距和填充的方式类似,此新样式也将关闭默认边框。您也可以使用本文前面所示的通配符选择器执行相同的操作。

Jennifer Krynin的原创文章。由Jeremy Girard于2016年9月27日编辑。