4

我使用以下 CSS 样式来调试我的 div 和 span 轮廓的位置（通常保持注释）：

div { outline: 1px dashed blue } span { outline: 1px dashed green }

虽然这显示了 div 和 span 的外部边界，并给出了相对于内部对象/文本的填充的想法，但它无助于可视化分配给相同样式的边距在哪里。我了解填充和边距之间的区别，但我确实需要能够在构建页面时看到视觉效果（太多细节，太少注意力跨度）。

有没有办法添加一个外部矩形来显示样式的边距在哪里？

4

3 回答 3

1

我不知道任何允许在边距外部设置边框的属性，因为这违背了边距的目的。W3的盒子模型说明

虽然这在早期 Web 开发中是一项很棒的技术，但我强烈建议您花几分钟时间来安装 Firebug 或熟悉 Chrome 的开发人员工具或 Safari 的“检查”功能等。您只需将鼠标悬停在代码上即可走得更远比花几个小时手工制作调试样式的数据还要多。

你会爱上他们的！

Firebug 尤其允许将鼠标悬停在代码上，它会突出显示您的主框、颜色编码的填充和边距等。一个非常宝贵的工具 - 它甚至比 Dreamweaver 的内置视觉轮廓工具更好。

于 2013-03-21T04:56:57.880 回答
1

您可以为此使用我的新工具。您将鼠标悬停在页面中的任何元素上，它将显示其布局的所有部分（边距、边框、填充等）。

HTML 框可视化工具 - GitHub

于 2016-10-24T06:03:25.477 回答
0

据我所知，没有。如前所述，我建议使用 Chrome 的开发工具或 Firebug。使用这些工具获得的一个不错的好处是能够动态操作 DOM。这使得测试放置非常快速和轻松。有时如果我试图将一个 div 放在右侧，我会右键单击该 div，选择检查此元素，然后查看右侧的属性。您实际上可以实时调整这些并查看页面中反映的更改。一个不错的技巧是，许多属性允许您使用向上和向下箭头键来循环浏览它们的值。这使得调整 margin-left 或 margin-right 值变得轻而易举。

于 2013-03-21T05:05:55.223 回答