父元素line-height设为0后,inline-block的空元素终于安分了

想要画下图这个轮播图按钮来着,一个

,中间三个搞定。
恩哼

设置inline-block,然后设置宽高,margin-topmargin-bottom一样的话,就会在

里垂直居中了对吧,然而并没有。
的高度总是比算出来的高了那么点,使得并没有很完美垂直居中,怪怪的。

恩,到处改改改试试试,然后发现是line-height搞的鬼。

举个简单的栗子哈,我有一个

,如果line-height不是0,比如line-height30px,里面只有一个空的,我设置inline-block,然后设置宽度50px,高度和line-height一样,也是30px,那么,
的高度是不是也是30px呢?是呢?不是呢?

HTML代码:


  

CSS代码:

div{
  line-height: 30px;
  background: red;
}
span{
  display: inline-block;
  width: 50px;
  height: 30px;
  background: green;
}

结果是

要高。

父元素line-height设为0后,inline-block的空元素终于安分了_第1张图片

恩哼,好奇怪,我尝试在里输入点啥,结果就正常了。

clipboard.png

所以,为了不显示文本,我可以在中插入空格符号 ,这样不影响显示。

或者,把

line-height设为0,都可以使得
高度就是高度。

clipboard.png

然后我再给加上margin: 10px 0;,好了,

你可能感兴趣的:(css)