首页 > Web开发 > 详细

html行内元素转换为inline-block元素换行产生边距

时间:2016-08-11 15:32:34      阅读:191      评论:0      收藏:0      [点我收藏+]

今天再次遇到行内元素转换为inline-block后换行产生距离的问题(也许不止有行内元素,其他的没有遇到),然后就找了一个解决办法,原文可以参考http://www.cnblogs.com/PeunZhang/archive/2012/09/28/2706094.html

我也总结一下

结构:
<div class="span-wrap">
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
</div>

样式:
html{
  -webkit-text-size-adjust:none;/* 使用webkit的私有属性,让字体大小不受设备终端的调整,可定义字体大小小于12px */
}
.span-wrap {
font-size:0;/* 所有浏览器 */
*word-spacing:-1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙,减少单词间的空白(即字间隔) */
}
.span-wrap span{
font-size: 12px;
letter-spacing: normal;/* 设置字母、字间距为0 */
word-spacing: normal; /* 设置单词、字段间距为0 */
}

html行内元素转换为inline-block元素换行产生边距

原文:http://www.cnblogs.com/mumuyuexi/p/5760947.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!