困然许久的vertical-aligin，间隙的出现并不是bug,!!!!

lsxiao 发布于2019-08-30 13:11 / 1958人阅读

摘要：最近学习一个出现一个奇怪的现象，话不多说先贴代码。当初认为由于设置成了之后，换行和空格都被解析造成的，然是后来已测试，发现根本不是这个原因造成的，最近经过自己的苦思冥想，查阅资料，竟然发现是搞得鬼。因为浮动不属于行内元素了。

最近学习一个html,出现一个奇怪的现象，话不多说先贴代码。

`


    
    Document




    
    
    


    
    

    


`


----------

这是代码。。。

当初认为由于设置成了line-blcok之后，换行和空格都被解析造成的，然是后来已测试，发现根本不是这个原因造成的，最近经过自己的苦思冥想，查阅资料，竟然发现是vertical-align搞得鬼。

现在我来解释下原因，不过要明白的话，需要了解行高，基线等概念
我先在举几个例子




    
    Document




    
    
    


    x我

效果：

可能大家没注意到：这个现象已经说明了原因，现在我来分下下：
**

1. 了解x;我们知道x的底部是基线，但是根据分析，基线下面应该有底线，底线下面有一半的行高，


2.我们可以看到x是和div垂直平齐的，这个也是google浏览器默认的文本以基线居中，但是基线下面还有到底线的距离和半个行高。因此为了容下字体，下面的div需要向下移动  基线到底线的距离+一半的行高
3.在google浏览器中，默认字体大小16px,ling-height是18px，我测量他们的缝隙是3px,就可以知道他们一半的行高是1px,基线到底线的距离是2px,
总结：这个就是出现缝隙的原因所在了。

**
解决办法：

1.浮动。因为浮动不属于行内元素了。
2.改变vertical-align的对齐方式，适应top,和bottom可以消除缝隙，
注意：是用text_top 和text_bottom任然会出现缝隙但是比之前小一点，因为他们是跟字体对齐，换句话说，他们没有基线到底线的距离，只有一半行高的距离，所以缝隙会变小。

混合云私有云 bug的生命周期管理bug的软件 php常见的bug java的bug集

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

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

困然许久的vertical-aligin，间隙的出现并不是bug,!!!!

摘要：最近学习一个出现一个奇怪的现象，话不多说先贴代码。当初认为由于设置成了之后，换行和空格都被解析造成的，然是后来已测试，发现根本不是这个原因造成的，最近经过自己的苦思冥想，查阅资料，竟然发现是搞得鬼。因为浮动不属于行内元素了。最近学习一个html,出现一个奇怪的现象，话不多说先贴代码。 ` Document *{ margin:0; padd...

antz 2019-08-02 15:56 评论0 收藏0
为什么开发人员必须要了解数据库锁？

摘要：小明马上开发完毕，成功上线。下班过后，小明回想大红说的话，什么是间隙锁，什么是插入意向锁，看来作为开发者对数据库不应该只会写啊，不然遇到一些疑难杂症完全没法解决啊。破坏了数据库中的隔离性。 1.锁？ 1.1何为锁锁在现实中的意义为:封闭的器物，以钥匙或暗码开启。在计算机中的锁一般用来管理对共享资源的并发访问，比如我们java同学熟悉的Lock,synchronized等都是我们常见的...

AbnerMing 2019-08-16 15:44 评论0 收藏0
为什么开发人员必须要了解数据库锁？

摘要：小明马上开发完毕，成功上线。下班过后，小明回想大红说的话，什么是间隙锁，什么是插入意向锁，看来作为开发者对数据库不应该只会写啊，不然遇到一些疑难杂症完全没法解决啊。破坏了数据库中的隔离性。 1.锁？ 1.1何为锁锁在现实中的意义为:封闭的器物，以钥匙或暗码开启。在计算机中的锁一般用来管理对共享资源的并发访问，比如我们java同学熟悉的Lock,synchronized等都是我们常见的...

Hydrogen 2019-08-01 10:38 评论0 收藏0
9：浏览器兼容

摘要：由和开发的浏览器排版引擎，年月发布。浏览器的兼容问题是我们必须去克服的。表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。 9：浏览器兼容常见的主流浏览器 1）主流浏览器 Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游 2）最早的浏览器 : Mosaic ...

AWang 2019-04-23 13:33 评论0 收藏0
MySQL - 事务的启动 / 设置 / 锁 / 解锁——入门

摘要：行级锁，页级锁，表级锁。闻其名知其意，比较少见的是页级锁，它锁定的是一组相邻数据。排他锁允许获得排他锁的事务更新数据，阻止其他事务取得相同数据集的读写。意向排他锁事务打算给数据行加行排他锁，事务在给一个数据行加排他锁前必须先取得该表的锁。废话本篇的名字简直可以起成《事务操作：从入门到放弃》。力图解决：在MySQL 5.5 版本及更高版本时，使用事务的完整流程和细节记录，而无需面对...

iOS122 2019-06-27 16:59 评论0 收藏0