html - 在 body 上填充

Question

我正在使用 vBulletin 设计一个主要使用表格设计网站样式的论坛。我将如何在 tbody 上使用填充来将内容与边框隔开？

在这里您可以看到我的主站点的图片，其中内容被推离边框 5 像素:

而在 vBulletin 上，在 tbody 上添加填充不会将内容推开:

Answer 1

方法一
您有几个不同的选择:

tbody:before {
  content: '';
  display: block;
  height: 20px;
}

添加这个基本上是在结尾之前“插入”内容。这是一种“快速修复”的方法。


方法二
另一种选择是给你的 table border-collapse: collapse 然后给你的 tbody 一个边框值:

table {
  border-collapse: collapse;
}
table tbody {
  border-right: 20px solid transparent;
}

然而，这两种方法都有缺点。 before 选择器可能无法在 IE7 中工作，并且需要 !DOCTYPE 才能在 IE8 中工作。第二种方法有时可能有点棘手，具体取决于您的 css 的其余部分。一定要有一个!DOCTYPE