最近遇到的問題:兩個div之間明明設(shè)置了margin:0;padding:0,但兩個div之間還是有間距
可能還會遇到,在兩個input標(biāo)簽,或者input與span標(biāo)簽之間,會產(chǎn)生多余3個象素空格的問題。
如下圖:
空格測試
代碼如下:
<style> input{width: 120px; height: 30px;}</style>
<body>
<input type="text" value="空格"> <input type="text" value="測試">
</body>
我們明明沒有設(shè)置邊距,可是中間為什么會有差不多3個象素的距離呢?一時間摸不著頭腦,估計是瀏覽器搞的鬼,具體也不想深究。直接找辦法解決。
一、簡單粗爆不換行
寫代碼的時候不要換行,input等在一行輸寫。但是代碼就變得不再那么容易好看。
二、設(shè)置父級塊的字體大小為0
這樣也能解決問題,代碼也好看,但是當(dāng)你設(shè)置了父級的font-size:0時,你里面又要其它字體要顯示,可能其他元素要重新設(shè)置字體大小。
如下:
<style> body{font-size: 0} input{width: 120px; height: 30px;}</style>
<body>
<input type="text" value="空格"> <input type="text" value="測試">
</body>
空格測試
三:設(shè)置margin-left:-3px;
使得該元素基于原來的位置向左偏移三個象素,也就看不出有空隙了。
我選擇第一種解決辦法,希望其他同事更新代碼后不要去格式化那段代碼。