解决inline-block元素的3个 bug

yuanxin 发布于2019-08-29 13:17 / 3006人阅读

摘要：在使用时，有时候出现的效果莫名奇妙，例如两个元素之间如果有空格回车，那么在页面上就有一个空隙两个不同高度的元素顶部无法对齐，或者使用下面无缘无故多出几像素例子出现空隙效果解决方法去掉空格添加父元素，将父元素的设置为，然

在使用inline-block时，有时候出现的效果莫名奇妙，例如：

两个inline-block 元素之间如果有空格、回车、tab，那么在页面上就有一个空隙

两个不同高度的 inline-block 元素顶部无法对齐，或者使用inline-block下面无缘无故多出几像素

例子1,出现空隙





  
  JS Bin

效果：

解决方法

1.去掉空格





  
  JS Bin

2. 添加父元素，将父元素的 font-size 设置为0，然后在 inline-block 元素中将 font-size 设置为 14px





  
  JS Bin

3. 使用margin-right





  
  JS Bin

4. 添加父元素，使用letter-spacing（该属性增加或减少字符间的空白（字符间距））





  
  JS Bin

5. 使用word-spacing （该属性增加或减少单词间的空白（即字间隔））





  
  JS Bin

解决效果：

例子2，设置inline-block 后，莫名其妙出现一些空白





  
  span设为inline-block之后下面的空白

效果

解决方法

使用vertical-align





  
  span设为inline-block之后下面的空白

解决效果

例子3，两个不同高度的 inline-block 元素顶部无法对齐





  
  JS Bin

效果

解决方法

还是使用vertical-align





  
  JS Bin

解决效果

idc机房托管私有云分析3个数据的深度学习的3个基础分别建立包含10个数据元素的顺序线性表和链式线性表个元素

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

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

解决inline-block元素的3个 bug

摘要：在使用时，有时候出现的效果莫名奇妙，例如两个元素之间如果有空格回车，那么在页面上就有一个空隙两个不同高度的元素顶部无法对齐，或者使用下面无缘无故多出几像素例子出现空隙效果解决方法去掉空格添加父元素，将父元素的设置为，然在使用inline-block时，有时候出现的效果莫名奇妙，例如：两个inline-block 元素之间如果有空格、回车、tab，那么在页面上就有一个空隙两个不...

546669204 2019-08-01 17:31 评论0 收藏0
CSS魔法堂："那不是bug，是你不懂我!" by inline-block

摘要：那不是，是我不懂而已。的用途之一西文是以空格来分隔单词的，而汉字间则无需空格分隔，但为了统一西文东亚和的排版，于是抽象出一个名为的概念用于分隔词义单元，则作为的值域，而定义域就是语言信息。前言每当来个需要既要水平排版又要设置固定高宽时，我就会想起display:inline-block，还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后发...

cucumber 2019-08-30 12:56 评论0 收藏0
浏览器兼容问题

摘要：一什么是浏览器兼容问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。条件注释最初于微软的浏览器中出现，并且直至均支持。一、什么是浏览器兼容问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都...

wenshi11019 2019-08-26 13:57 评论0 收藏0
margin相关基本知识

摘要：也能用于内联元素这是规范所允许的的和属性对非替换内联元素无效例如和。解决方法把左侧块级元素更改为内联元素，比如把更换为。什么是 margin ? CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School 边界，元素周围生成额外的空白区。空白区通常是指其他元素不能出现且父元素背景可见的区...

godiscoder 2019-04-23 13:15 评论0 收藏0