框模型混淆 - 表單元素中的表單輸入字段上的邊框/填充？

Question

通過使用背景和dborder，根據它們的內容應該是什麼（強制/選項/字符串/整數/浮點數/等），我使用不同格式輸入字段的顏色代碼。

我想有一個表格顯示了這個關鍵，以及每個例子。但是，其中一些只能通過邊界區分（例如，當表單需要重新提交時，輸入框無效的紅色邊框）。

但是，表元素<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做一份體面的工作，一旦習慣了盒子模型，您可以想出一些非常有趣的佈局。一旦你得到正確的浮動/定位，DIV可以比表更簡單，但仍然有些情況下表最適合工作。這取決於你自己決定。