如何消除html inline block-block产生的元素间空隙

来源：蜘蛛抓取(WebSpider) 时间：2017-09-05 09:44 标签： inline block 间距
inline-block元素间距问题怎么解决技巧 - 维维软件园
inline-block元素间距问题怎么解决技巧
来源：本站整理作者：佚名时间： 8:34:36(0)
inline-block元素间距问题怎么解决实例代码，display:inline-block：众前端们都知道，其作用是将对象呈递为内联对象，但是对象的内容作为块对象呈递。
有如下代码
&div class=&ac-btn&&
&a href=&#& class=&btn-save&&&/a&
&a href=&#& class=&btn-print&&&/a&
.ac-btn a{background:url(../img/action.png) no-repeat;width:73px;height: 25px;display: inline-block;}
.ac-btn .btn-save{background-position: 0 0;}
.ac-btn .btn-print{background-position: -73px 0;}
这样呈现的如下
2个元素之间有间隙，那么问题来了
为什么会出现间隙？
原因是inline-block允许空格，出现空隙的罪魁祸首就是包括换行在内的空白符。
如何消除间隙？
对父级元素设置font-size:0
即上述CSS代码改为
CSS Code复制内容到剪贴板
.ac-btn {font-size:0;}
.ac-btn a{background:url(../img/action.png) no-repeat;width:73px;height: 25px;display: inline-block;}
.ac-btn .btn-save{background-position: 0 0;}
.ac-btn .btn-print{background-position: -73px 0;}
block，inline和inlinke-block细节对比
display:block
1.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3.block元素可以设置margin和padding属性。
display:inline
1.inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2.inline元素设置width,height属性无效。
3.inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
大家还看了：
[访问统计：]
上一篇：下一篇：
该分类还没有添加任何内容！html和css（1）
在我们制作类似登陆框的东西的时候，需要用到label和 input text，但是实际上他们之间会存在空隙
&form action=&/login& method=&post&&
&label for=&username& class=&label_text&&用户名：&/label&
&input type=&text& name=&username& id=&username& class=&input_text&&
&label for=&pwd& class=&label_text&&密码：&/label&
&input type=&text& name=&pwd& id=&pwd& class=&input_text&&
&input type=&submit& name=&login& value=&登陆& id=&Blogin&&
对登陆按钮进行了left:60
label的width也是60
可是没有对齐，原因就是用户名和后面的框存在空隙
这个时候我们设置
/*如果不设置，那么应该inline-block的因素，会导致input跟text间有空隙*/
font-size: 0;
}这样就可以了
这个是对所有的inline-block元素都是这样的
/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：10223次
排名：千里之外
原创：11篇
(1)(1)(2)(3)(4)推荐这篇日记的豆列
&&&&&&&&&&&&1455人阅读
1.使用注释符号
& class="1"&1&&& class="2"&2&&& class="3"&3&&& class="4"&4&&
楼主对代码格式比较计较，这是动标签这边相对来说楼主可以接受的方式。
2.使用font-size和letter-space
& class="1"&1&&
& class="2"&2&&
& class="3"&3&&
& class="4"&4&&
{width: 100%;margin:0;text-align: center;font-size: 0;letter-spacing: -2px;}
{display: inline-block;width: 50%;background: lightblue;font-size: 36px;position: relative;vertical-align: middle;}
:before {content:"";display: inline-block;padding-bottom: 100%;vertical-align: middle;}
:nth-child(2),:nth-child(3){background: pink;}
{display: inline-block;vertical-align: middle;font-size: 6em;color: #fff;}
主要就是在外层body添加
font-size:0,–兼容chrome
letter-spacing:-2px,–兼容safari ,据说要根据字体大小调整，但是楼主用了88px的字体也没有问题，这个具体情况具体解决吧
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4182次
排名：千里之外
(1)(2)(1)(2)

我要回帖

更多关于 inline block 间距 的文章

 

随机推荐