日常css技巧小结-- inline-block带来的迷惑

Posted 2020-07-20 秦佳奇

一、问题描述

在平时布局中，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。

二、捋一捋概念

• block
  • 会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
  • 可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  • 可以设置margin和padding属性
• inline
  • 不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
  • 设置width,height属性无效。
  • margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
• inline-block
  • W3school：An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
  • 对上一句我的理解是：inline-block元素本身还是行标签，但当对其设置某属性时具有块标签的特点。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

三、解析问题

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/