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

【问题标题】：How to add a border around all elements in the body of a webpage?如何在网页正文中的所有元素周围添加边框？
【发布时间】：2018-05-10 22:46:15
【问题描述】：

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

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

你可以试试这个 CSS sn-p：

* { border: 1px solid black; }

现在每个元素都应该有一个边框。当心，这意味着一切。希望它能帮助您找出应用中的空白！

在你的 CSS 文件之前包含那个 CSS sn-p 以便它可以被覆盖 - 或之后，强制它到每个元素上。

【讨论】：

【解决方案2】：

试试

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

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

还要确保使用 CSS 重置（通常正文默认有 8px 边距http://www.w3.org/TR/CSS21/sample.html）

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

【讨论】：

【解决方案3】：

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

【讨论】：