問題：行內元素和行內塊元素之間換行的話，即使除去內外邊距，他們之間還是會有距離，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .span-wrap span，.span-wrap input{ padding: 0; margin: 0; } </style> <body> <div class="span-wrap"> <span>行內元素</span> <span>行內元素</span> <input type="text" value="行內塊元素"> </body> </html>
解決方法：
1.代碼內刪除行內元素、行內塊元素之間的換行符、tab（制表符）、空格等字符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .span-wrap span，.span-wrap input{ padding: 0; margin: 0; } </style> <body> <div class="span-wrap"> <span>行內元素</span><span>行內元素</span><input type="text" value="行內塊元素"> </body> </html>
不推薦，影響閱讀
2. 利用HTML注釋
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .span-wrap span，.span-wrap input{ padding: 0; margin: 0; } </style> <body> <div class="span-wrap"> <span>行內元素</span><!-- --><span>行內元素</span><!-- --><input type="text" value="行內塊元素"> </body> </html>
不推薦，寫起來費時，影響結構
3. 為父元素設置設置font-size：0
注意子元素要重新設置font-size
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .span-wrap{ font-size: 0; } span,input{ padding: 0; margin: 0; font-size: 12px; } </style> <body> <div class="span-wrap"> <span>行內元素</span> <span>行內元素</span> <input type="text" value="行內塊元素"> </body> </html>
4.利用浮動
利用浮動的元素是緊挨的這一特性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span,input{ padding: 0; margin: 0; float: left; } </style> <body> <div class="span-wrap"> <span>行內元素</span> <span>行內元素</span> <input type="text" value="行內塊元素"> </body> </html>
————————————————
原文鏈接：https://blog.csdn.net/qq_34708564/article/details/90263680