html怎么去掉空格

2022-11-17 16:47:01 来源：用户：

跟大家讲解下有关html怎么去掉空格，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说html怎么去掉空格，小编也收集到了有关html怎么去掉空格的相关资料，希望大家看到了会喜欢。

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视频教程】

以上就是html怎么去掉空格的详细内容，更多请关注php中文网其它相关文章！

来源：php中文网

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。如有侵权请联系删除！