如何去除html代码标签之间换行产生的空格
2016-10-10 10:54
1036 查看
参考链接:5种方法去掉HTML中Inline-Block元素之间的空白
推荐方法:在父元素上设置
例:
效果预览:
修改后代码:
效果预览:
当使用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; } div { 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> <div> <a class="shouye" href="#">设为首页</a> <a href="#">手机新浪网</a> <a href="#">移动客户端</a> </div> </body> </html>
效果预览:
修改后代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; padding: 0; } div { 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> <div> <a class="shouye" href="#">设为首页</a> <a href="#">手机新浪网</a> <a href="#">移动客户端</a> </div> </body> </html>
效果预览:
相关文章推荐
- 如何去除html代码标签之间换行产生的空格
- JSP输出HTML时产生的大量空格和换行的去除方法
- 去掉html源代码里标签之间的空格和换行
- JSP输出HTML时产生的大量空格和换行的去除方法
- JSP输出HTML时产生的大量空格和换行的去除方法
- HTML标签换行导多个inline-block元素不能在同一行,img之间会有空格
- JSP输出HTML时产生的大量空格和换行的去除方法
- JSP输出HTML时产生的大量空格和换行的去除方法
- Html中代码换行造成空格间距如何解决
- JSP输出HTML时产生的大量空格和换行的去除方法
- JSP输出HTML时产生的大量空格和换行的去除方法
- JSP输出HTML时产生的大量空格和换行的去除方法
- JSP输出HTML时产生的大量空格和换行的去除方法
- 如何分析网页数据并且去除Html标签(C#)
- 如何让html 标签<textarea>文本域 在Opera浏览器下自动换行
- PHP 中如何去除 HTML 标签
- innerHtml 去除 html 标签代码
- C# 去所有 html标签的代码|去除html标签代码
- asp.net 中如何去除FCK编辑器生成的Html的标签
- PHP 去除 HTML 回车 换行 空格