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

Question

我的网站右侧有一些奇怪的空白区域出现在手机中。我想知道是否有一个CSS技巧来为网页正文中的所有html元素添加边框，以便我可以找出哪个元素正在扩展并导致移动设备上的空白区域。

谢谢

Answer 1

尝试

* { 
  outline: 1px solid red;
  outline-offset: -1px;
}

*是一个全局选择器，而outline不会弄乱您的元素位置，它只会添加1px红色轮廓

还要确保使用CSS重置（通常默认情况下为8px页边距http://www.w3.org/TR/CSS21/sample.html）

您可以调整窗口大小，打开调试控制台并检查可能产生问题的元素。查看“样式”面板并对样式进行测试编辑，直到修复它为止。在Chrome控制台中，您还可以使用模拟选项来测试不同设备的页面。

Answer 2

您可以尝试这个CSS代码段：

* { border: 1px solid black; }

现在每个元素都应该有一个边框。当心，这意味着一切。希望它能帮助你弄清楚应用程序中的空白区域！

在CSS文件之前加入CSS代码段，以便可以覆盖它 - 或之后，将其强制插入每个元素。

Answer 3

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