我可以使用什么来用可见的内边距、边距和边框来勾画 HTML 元素的轮廓？
我通常可以很好地使用 Chrome Web Developer 扩展来概述元素、调试 CSS 等，当这无法完成任务时，我使用 Firefox 版本（原始的高级版本），但我会使用真正喜欢的是一个工具，可以勾勒出元素的“足迹”，显示“核心”元素、其填充、实际宽度的边框及其边距。
Chrome 或 Firefox 是否有这样的工具？
I normally get by quite well using the Chrome Web Developer extension to outline elements, to debug my CSS etc. and when that isn't up to the task, I use the Firefox version (the original, superior version), but what I would really like is a tool that can outline the 'footprint' of an element showing the 'core' element, its padding, its border at real width, and its margins.
Is there such a tool for Chrome, or for Firefox for that matter?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
概述所有元素：
To outline all elements:
Chrome 开发工具拥有一切：
您可以看到黄色的实际尺寸，最深蓝色的边距，填充物为浅蓝色，实际元素为浅蓝色。然后，您可以打开控制台并切换到“Metrics”部分，以查看类似于 firebug 中的“Layout”的内容。
附言。作为多年的前 Firebug 粉丝，我可以向您保证 Chrome 开发工具实际上比 Firebug 现在更强大，您只需要发现所有功能即可。
Chrome dev tools have it all:
You can see the actual size in yellow, margins in the darkest blue, paddings in lighter blue, and actual element in the lightest blue. You can then open console and switch to "Metrics" section to see something similar to "Layout" in firebug.
PS. As ex firebug fanboy for many years I can assure you that Chrome dev tools are actually more powerful than firebug right now, you just need to discover all the features.
讽刺的是，所有浏览器中的 IE 都内置于开发工具中（在 HTML 选项卡上时为“布局”）。
对于 Firefox，优秀的 Firebug 有一个类似的工具（同样，HTML 选项卡，右侧的“布局”） 。
Ironically, IE of all browsers has that built in to the dev tools ('layout' when on the HTML tab).
For Firefox, the excellent Firebug has a similar tool (again, HTML tab, 'layout' on the right-hand side).