Rumah >hujung hadapan web >html tutorial >日常css技巧小结(2)-- inline-block带来的迷惑
一、问题描述
在平时布局中,inline-block使用的频率比很高,主要是因为可以让行标签设置宽高。我在布局过程中,发现了两个“问题”,
1行标签.display:inline-block之后的行标签之间有4像素的间距;https://jsfiddle.net/firelight/69phh891/
2.对display:inline-block的行标签设置margin:0 auto;也不会在父级居中。https://jsfiddle.net/firelight/jh5ojqu6/
我开始对display:inline-block的理解是:既是行标签也是块标签。随着这两个问题的出现发现并不是简单的1+1=2。
二、捋一捋概念
三、解析问题
1、display:inline-block之后的行标签之间有4像素的间距;?
起初我认为是inline-block带来的问题,结果当我把inline-block去掉,这4个像素依然存在。在张鑫旭的一篇博客中,解释这个是符合规范的应有的表现,元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。当然还有N种在不影响HTML代码结构的情况下解决这个问题的方法,就不在此赘述。可以参考张鑫旭的文章:http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove
2、对display:inline-block的元素设置margin:0 auto;也不会居中?
margin:0 auto;是设置块标签在父级中居中对齐,是一种对齐方式。所以对于display:inline-block,设置margin:0 auto;此时是其本身的行标签性质占上风(而行标签本身默认靠左对齐),所以并不起作用。应该在其父级设置text-align:center来居中对齐。如果设置具体的margin,上下左右四个方向还是可以的。https://jsfiddle.net/firelight/jh5ojqu6/1/