生产企业网站建设/如何创建微信小程序

css边框虚线间距

我最近遇到了CSS的特殊性，这使我挠了挠头，所以我认为值得在此处发表一些帖子，以供将来使用Google搜索的Google抓挠头。

WSG邮件列表发送了许多CSS布局问题，上周我注意到了这个查询 。 Tee希望直观地复制下面显示的表格布局，而不添加额外的环绕式DIV或其他非语义标记。

它并不像看起来那么简单。

无论如何，围绕着我的方法 ，我遇到了一个我很少使用CSS属性： border-spacing 。

现在，如果您对border-spacing不是很熟悉，它实际上是旧的“ cellspacing”表格属性的更好版本（即<table cellspacing="3px" .. ），并可以控制表格单元格之间的空间。 当然，如果将表格的边框设置为折叠（即border-collapse:collapse; ），则表格单元格之间没有空格，因此设置border-spacing变得多余。

CSS的边框间距比HTML的cellspacing（除了更清晰的标记）具有的主要优势是，它允许您设置不同的水平和垂直间距宽度-似乎非常适合创建示例中所需的5像素行分隔。 Cellspacing仅接受一个值。

猜测CSS，尝试时（ 尝试自己使用 ）没有得到预期的结果：

table#grid {border-collapse:separate;border-spacing:  5px 0px ;
}

与margin ， padding ， border和我能想到的所有其他CSS属性的操作方式相反， border-spacing要求在获得垂直值之前先获得水平值。 奇怪。

注意border-spacing其他要点：

• 您无法分配不同的上，下，右和左值。 如果您考虑一下，这是有道理的，因为我们实际上是在讨论TABLE的属性，但是我认为很容易欺骗自己以为它是TD的一部分-毕竟它围绕TD边界。
• 在所有现代浏览器中，支持都是完美的，但是旧版IE6和7根本不支持此属性。

翻译自: https://www.sitepoint.com/interesting-css-quirks-border-spacing/

css边框虚线间距