如何去掉HTML中换行造成的空格
2017-05-12 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
思路：在父元素上设置font-size: 0;
font-size定义和用法
font-size 属性可设置字体的尺寸。
去掉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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
当使用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="#">百度1</a>
<a href="#">百度2</a>
</div></body></html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
