css - 盒子模型混淆 - 表格元素内表单输入字段的边框/填充？

Question

我使用背景和 dborder 根据它们的内容应该是什么(强制/选项/字符串/整数/ float /等)对不同的表单输入字段进行颜色代码。

我想要一个表格来显示这个的关键，每个都有一个例子。但是，其中一些只能通过边框来区分(例如，必须重新提交表单时输入无效的字段上的红色边框)。

但是，表格元素<td>拥抱 <input type="text" ...> .

本来应该很简单的，但是盒子模型一直让我很困惑。例如，如何使表格元素边框距输入字段 8 个像素， 在此:

<td>
  <input type="text" class="input_invalid" value="Error (value)" readonly>
</td>

Answer 1

<td style="padding:8px;"><input type="text" class="input_invalid" value="Error (value)" readonly></td>

http://www.w3.org/TR/CSS2/box.html

盒子模型可能令人望而生畏，但它最简单，几乎任何元素都可以有边距、边框和填充(按此顺序，从外到内)。

大多数 IE7+ 浏览器在基本 CSS 方面做得不错，一旦您习惯了盒子模型，您就可以想出一些非常有趣的布局。一旦掌握了正确 float /定位 DIV 的窍门，DIV 就可以比表格更简单，但在某些情况下，表格仍然最适合这项工作。由您决定。