解決表單元素的前后有一大塊空白的問題

2024-04-18    分類： 網(wǎng)站建設(shè)

為什么表單元素的前后有一大塊空白？

解決思路：

因?yàn)楸韱卧豧orm是默認(rèn)外補(bǔ)白margin屬性不為0的塊元素，所以要解決問題有兩個(gè)方法，定義塊元素為行內(nèi)元素，或者設(shè)置CSS對(duì)象的margin屬性為0。

具體步驟：

方法一：設(shè)置CSS對(duì)象的margin屬性為0：

<div style="border:1px solid #000">第一行<form style="margin:0px"></form>第二行</div>

方法二：把塊元素設(shè)置為行內(nèi)元素：

<div style="border:1px solid #000">第一行<form style="display:inline"></form>第一行</div>

雖然還有一種是把<form>標(biāo)簽跟<tr>或者<td>嵌套的寫法，但不推薦使用：

<table><form><tr><td>單元格</td></tr></form></table>

或

<table><tr><form><td>單元格</td></form></tr></table>

注意：第一種方法在表單前后的文字不在同一行，而第二種方法同行。

提示：如果想改變所有表單的這個(gè)效果，可以直接在CSS里定義：

<style> form{margin:0px} </style>

或

<style> form{display:inline} </style>

特別說明

問題的解決主要是利用塊元素和行內(nèi)元素的特點(diǎn)，進(jìn)行互相轉(zhuǎn)化，另外還有CSS對(duì)象的margin屬性。本例主要是解決表單相關(guān)的問題，要了解更詳細(xì)的CSS對(duì)象的display和margin屬性，請(qǐng)參考第二部分。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

分享題目：解決表單元素的前后有一大塊空白的問題
標(biāo)題網(wǎng)址：http://bm7419.com/news17/324117.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、做網(wǎng)站、自適應(yīng)網(wǎng)站、網(wǎng)站收錄、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)