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

时间 2019-11-09

标签元素 line height 设为 inline block 终于安分繁體版

原文原文链接

想要画下图这个轮播图按钮来着，一个<div>，中间三个<span>搞定。
浏览器

设置<span>为inline-block，而后设置宽高，margin-top和margin-bottom同样的话，<span>就会在<div>里垂直居中了对吧，然而并无。<div>的高度老是比算出来的高了那么点，使得<span>并无很完美垂直居中，怪怪的。spa

恩，处处改改改试试试，而后发现是line-height搞的鬼。code

举个简单的栗子哈，我有一个<div>，若是line-height不是0，好比line-height是30px，里面只有一个空的<span>,我设置<span>为inline-block，而后设置宽度50px，高度和line-height同样，也是30px，那么，<div>的高度是否是也是30px呢？是呢？不是呢？blog

HTML代码：图片

<body>
  <div>
    <span></span>
  </div>
</body>

CSS代码：ip

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

结果是<div>比<span>要高。it

恩哼，好奇怪，我尝试在<span>里输入点啥，结果就正常了。class

因此，为了避免显示文本，我能够在<span>中插入空格符号 ，这样不影响显示。cli

或者，把<div>的line-height设为0，均可以使得<div>高度就是<span>高度。轮播图

而后我再给<span>加上margin: 10px 0;，好了，<span>在<div>中完美垂直居中了！

若是你在写CSS过程当中发现元素高度老是比计算的大点，看看是否是line-height在捣乱哦。

再举个栗子，好比在<a>里面插入一个<img>，什么样式都不设置，<a>的高度会是多少呢？是图片的高度吗？仍是浏览器默认行高呢？（由于<a>是行内元素）

若是我设置<a>为display: block;，那么<a>的高度就是<img>高度吗？仍是不是呢？

本身动手试试咯。