html怎么去掉空格
时间:2021-04-12 来源:互联网
今天PHP爱好者给大家带来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 { border-top: 4px solid red; border-bottom: 1px solid gray; }
a { display: inline-block; text-align: center; line- 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;/*关键代码*/
border-top: 4px solid red; border-bottom: 1px solid gray; }
a { display: inline-block; text-align: center; line- 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爱好者其它相关文章!
-
米姆米姆哈八大米姆王-1级与130级纯数值对比 2025-10-15
-
无限暖暖每日任务提醒-更新前900钻怎么获取 2025-10-15
-
燕云十六声美食玩法-清河地区美食有什么 2025-10-15
-
如鸢新密探祢衡蒯越解析-风兴云蒸卡池抽取建议 2025-10-15
-
忘川风华录幽墟四净灵-幽墟非常驻关怎么过 2025-10-15
-
手动再见是什么梗?揭秘网络热词背后的幽默与告别艺术 2025-10-15