html怎麼去掉空格
- 藏色散人原創
- 2021-04-12 10:21:544287瀏覽
html去掉空格的方法：先開啟對應的HTML程式碼檔案；然後透過在父元素上設定「font-size:0;」樣式即可移除html程式碼標籤之間換行產生的空格。
本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。
如何去除html程式碼標籤之間換行產生的空格
當使用inline-block時，HTML元素之間的空白會顯示在頁面上，為了保持程式碼的美觀，不建議使用全部寫在一行內或影響美觀的方法。
建議方法：在父元素上設定
font-size: 0;
範例：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body { margin: 0; padding: 0; }
p { height: 41px; border-top: 4px solid red; border-bottom: 1px solid gray; }
a { display: inline-block; height: 41px; text-align: center; line-height: 41px; text-decoration: none; padding: 0px 5px; background-color: red; font-size: 14px; font-family: 楷体; }
.shouye { margin-left: 200px; }
.shouye:hover { background-color: gray; }
</style></head><body>
<p>
<a class="shouye" href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
</p></body></html>效果預覽： 
修改後程式碼：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body { margin: 0; padding: 0; }
p { font-size: 0;/*关键代码*/
height: 41px; border-top: 4px solid red; border-bottom: 1px solid gray; }
a { display: inline-block; height: 41px; text-align: center; line-height: 41px; text-decoration: none; padding: 0px 5px; background-color: red; font-size: 14px; font-family: 楷体; }
.shouye { margin-left: 200px; }
.shouye:hover { background-color: gray; }
</style></head><body>
<p>
<a class="shouye" href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
</p></body></html> 效果預覽：
以上是html怎麼去掉空格的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：教你一招實現“代碼雨”下一篇：教你一招實現“代碼雨”