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

Godtoy 发布于2019-08-30 13:11 / 1647人阅读

摘要：设置为，然后设置宽高，和一样的话，就会在里垂直居中了对吧，然而并没有。恩，到处改改改试试试，然后发现是搞的鬼。所以，为了不显示文本，我可以在中插入空格符号，这样不影响显示。或者，把的设为，都可以使得高度就是高度。

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

，中间三个搞定。

设置为inline-block，然后设置宽高，margin-top和margin-bottom一样的话，就会在

里垂直居中了对吧，然而并没有。

的高度总是比算出来的高了那么点，使得并没有很完美垂直居中，怪怪的。

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

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

，如果line-height不是0，比如line-height是30px，里面只有一个空的,我设置为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，都可以使得

高度就是高度。

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

中完美垂直居中了！

如果你在写CSS过程中发现元素高度总是比计算的大点，看看是不是line-height在捣乱哦。

再举个栗子，比如在里面插入一个，什么样式都不设置，的高度会是多少呢？是图片的高度吗？还是浏览器默认行高呢？（因为是行内元素）

如果我设置为display: block;，那么的高度就是高度吗？还是不是呢？

自己动手试试咯。

云服务器 GPU云服务器父元素元素父节点 iframe父元素 html删除父元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115374.html

css水平垂直居中

摘要：要让下图中绿色框水平垂直居中，你是怎么实现的，可能每个人都有自己习惯的使用方法。把元素设为方法在父元素中设置和然后设置垂直对齐方式为居中就可以适合父元素高固定的，毕竟要设置行高。本篇博客首发于本人博客水平垂直居中要让下图中绿色框水平垂直居中，你是怎么实现的，可能每个人都有自己习惯的使用方法。下面是我总结的几种方法废话不多说，直接上菜。showImg(http://ooa3lxrpg....

jaysun 2019-08-29 12:39 评论0 收藏0
css水平垂直居中

摘要：要让下图中绿色框水平垂直居中，你是怎么实现的，可能每个人都有自己习惯的使用方法。把元素设为方法在父元素中设置和然后设置垂直对齐方式为居中就可以适合父元素高固定的，毕竟要设置行高。本篇博客首发于本人博客水平垂直居中要让下图中绿色框水平垂直居中，你是怎么实现的，可能每个人都有自己习惯的使用方法。下面是我总结的几种方法废话不多说，直接上菜。showImg(http://ooa3lxrpg....

blankyao 2019-08-01 16:54 评论0 收藏0
移动端导航布局（基础属性解决大问题）

摘要：移动端比较常见的一个需求是高度根据宽度进行自适应。等于视口高度的。一布局场景首页导航布局有间距样式代码页面布局与布局相同代码解析去除最后一个元素值设置布局经常会使得元素元素间莫名其妙出现空隙。写在最前：移动端中导航的网格式布局无处无在，宽高怎么设置相适应？元素怎么居中对齐？不同场景怎么选择代码最高效？巧妙使用margin、padding等基础属性，小小技巧可以解决许多烦恼！一、F...

Edison 2019-08-30 15:44 评论0 收藏0
在我水了11种水平垂直居中方法之后，我终于明白了

摘要：老生常谈，水平垂直居中。为什么大家都爱水平垂直居中呢基本根据如上结构，通过实现水平垂直居中。绝对定位利用父元素相对定位和子元素绝对定位进行水平垂直居中。老生常谈，水平垂直居中。为什么大家都爱水平垂直居中呢？基本HTML 根据如上结构，通过css实现水平垂直居中。绝对定位利用父元素相对定位和子元素绝对定位进行水平垂直居中。根据是否知道子元素宽高，使用数值或者百分比...

levius 2019-08-29 18:40 评论0 收藏0
vertical-align以及利用 vertical-align 实现垂直居中

摘要：在中实现垂直居中很多时候会用到，不过我一直对的使用糊里糊涂，现在整理一下关于它的一些知识点。将盒子的垂直中心点与父级盒子基线往上一半高度的位置对齐。时位置与设置一致。我们可以将设为来让元素完全垂直居中。在 css 中实现垂直居中很多时候会用到 vertical-align ，不过我一直对 vertical-align 的使用糊里糊涂，现在整理一下关于它的一些知识点。原文链接 1. 适...

lscho 2019-08-30 15:52 评论0 收藏0