如何在网页正文的所有元素周围添加边框？

我的网站在手机右侧出现一些奇怪的白色空间。我想知道是否有CSS技巧为网页正文中的所有html元素添加边框，以便我可以确定哪些元素正在伸出并在移动设备上产生空白区域。如何在网页正文的所有元素周围添加边框？

谢谢

'* {border：1px solid redl}' – 2014-10-05 20:08:43

您也可以检查元素以查找有问题的元素。发布一个链接，我们其中一个人将为您检查。 – Vector 2014-10-05 20:13:35

与Vector一致。如下面的答案，您可以使用* {}来选择页面上的所有内容，但我相信这会显着影响您的页面加载时间。你应该找到这个原因并解决它。 – Kwestion 2014-10-05 20:15:34

你可以试试这个CSS代码片段：

* { border: 1px solid black; }

每一个元素现在应该得到一个边界。当心，这意味着一切。希望它能帮助你找出你应用中的空白区域！

将CSS代码片段包含在CSS文件之前，以便它可以被覆盖 - 或者之后，将其强制到每个元素上。

2014-10-05 20:09:57

每个元素都会得到一个血腥的边框，并且边框将被计算为元素宽度。 '盒子大小：边框;'将有助于暂时防止一团糟。 – 2014-10-05 20:11:13

尝试

* {outline : 1px solid red; }

*是一个全球性的选择，而outline不会与你的元素位置的混乱，这将只需添加一个1px的红色轮廓

另外，还要确保你使用一个CSS复位（通常机身默认为8像素边距http://www.w3.org/TR/CSS21/sample.html）

您可以调整窗口大小，打开调试控制台并检查可能导致问题的元素。看一下样式面板并测试编辑样式，直到得到解决。在Chrome的控制台中，您还可以使用仿真选项来测试您的页面是否适用于不同的设备。

2014-10-05 20:12:29

这不回答问题。大纲不是边界。轮廓可能比边界更好，但这可以在评论或P.S.中说出。 – 2014-10-05 20:20:30

* { 
    border-style: 2px 3px solid dashed #3A5FCD; 
}

2016-12-01 14:10:00 Gowshigan

请使用[编辑]链接说明此代码的工作原理，不要只给代码，因为解释更有可能帮助未来的读者。 – 2016-12-01 19:56:23

回答