Html中代碼換行造成元素間距的問題

最近遇到的問題:兩個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;
使得該元素基于原來的位置向左偏移三個象素,也就看不出有空隙了。

我選擇第一種解決辦法,希望其他同事更新代碼后不要去格式化那段代碼。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,199評論 1 92
  • 本課來自http://www.imooc.com/learn/9請不要用作商業(yè)用途。 HTML5 HTML介紹 H...
    PYLON閱讀 3,457評論 0 5
  • ? JavaScript 3 1. HTML對象獲取問題 32. const問題 33. event.x與even...
    橫沖直撞666閱讀 3,275評論 0 7
  • 0. HTML對象獲取問題 3 0. const問題 3 0. event.x與event.y問題 3 0. wi...
    趙長安啊閱讀 587評論 0 0
  • “我還以為,你會去深圳和你男朋友雙宿雙飛。” “我以為,你會去深圳的?!?在意外失去了一份工作后,我與幾個朋友聊天...
    熱熱去南方閱讀 342評論 0 0

友情鏈接更多精彩內(nèi)容