網頁設計技術-表單有奇怪的空白
網頁設計技術-表單有奇怪的空白
為什麼表單元素的前後有一大塊空白？
解決思路：
因為表單元素form是默認外補白margin屬性不為0的塊元素，所以要解決問題有兩個方法，定義塊元素為行內元素，或者設置CSS物件的margin屬性為0。
具體步驟：
方法一：設置CSS物件的margin屬性為0：
<div style=”border:1px solid #000″>第一行</div>
<form style=”margin:0px” enctype=”application/x-www-form-urlencoded”></form>第二行
方法二：把塊元素設置為行內元素：
<div style=”border:1px solid #000″>第一行</div>
<form style=”display:inline” enctype=”application/x-www-form-urlencoded”></form>第一行
雖然還有一種是把
<form enctype=”application/x-www-form-urlencoded”>標籤跟
或者
<td> </td>
嵌套的寫法，但不推薦使用： </form><form enctype=”application/x-www-form-urlencoded”>
<table border=”0″><form enctype=”application/x-www-form-urlencoded”></form></table>
或
<table border=”0″>
<tbody>
<tr><form enctype=”application/x-www-form-urlencoded”>
<td>單格</td>
</form></tr>
</tbody></table>
注意：第一種方法在表單前後的文字不在同一行，而第二種方法同行。
提示：如果想改變所有表單的這個效果，可以直接在CSS裏定義：
<!–
form{margin:0px}
–>
或
<!–
form{display:inline}
–>
