使用display:inline-block产生间隙

一、产生的原因:当初设立标准的不是亚洲而是欧洲,inline元素为了正确显示英文字母如y j g等带有尾巴的,就在底下留空。
二、解决办法:

四个div之间有小间距,解决办法:让水平间隙消失就是在父级上加font-size:0;要设置字体大小可以在子元素里再设置。
让垂直间隙消失,就在子元素上加vertical-align:bottom。

如果子标签内有文字,则display:inline-block元素不会生成垂直方向有空白! 下面是解决好的效果:

使用display:inline-block产生间隙的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  4. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  6. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  7. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  8. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  10. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

随机推荐

  1. Java保留字和关键字

    Java的关键字:java的关键字对Java的编译器有着特殊的意义,它们表示一种数据类型或者程序的结构相关. Java的保留字:为Java预留的关键字,现在还没用到,但在新Java的版本升级中可能会用 ...

  2. Maven学习笔记—私服(包含maven的setting.xml配置)

    为什么要用远程仓库(私服) 如果没有私服,我们所需的所有构件都需要通过maven的中央仓库和第三方的maven仓库下载到本地,而一个团队中的所有人都重复的从maven仓库下载构件,这样就加大了中央仓库 ...

  3. 5 TensorFlow入门笔记之RNN实现手写数字识别

    ------------------------------------ 写在开头:此文参照莫烦python教程(墙裂推荐!!!) ---------------------------------- ...

  4. [转]C#读写远程共享文件夹

    1.在服务器设置一个共享文件夹,在这里我的服务器ip地址是10.200.8.73,共享文件夹名字是share,访问权限,用户名是administrator,密码是11111111. 2.新建一个控制台 ...

  5. 浅谈 JS 内存泄露方式与避免方法(二)

    Concept WHAT : 内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束.正常情况下,垃圾回收器在DOM元素和event处理器不被引用或访问的时候回收它们.但是,IE的早些 ...

  6. BZOJ 5312: 冒险

    首先我们考虑,对于And 和 Or 操作,对于操作位上只有And 0 和 Or 1 是有效果的. 我们注意到如果区间内需要改动的操作位上的数字都相同,那么是可以区间取与以及区间取或的. 那其实可以维护 ...

  7. spring boot集成redis缓存

    spring boot项目中使用redis作为缓存. 先创建spring boot的maven工程,在pom.xml中添加依赖 <dependency> <groupId>or ...

  8. DATEDIFF() 返回2个日期之间的间隔

    SELECT DATEDIFF(day,'2008-12-29','2008-12-30') AS DiffDate 解释: 第一个参数 day 表示 返回2个日期间隔的 个间隔类型 是 日期:结果 ...

  9. 转一篇Git代码回滚技巧

    转 https://github.com/geeeeeeeeek/git-recipes/wiki/5.2-代码回滚:Reset.Checkout.Revert的选择

  10. gradle-rn-app工程运行须知

    singwhatiwanna edited this page 16 days ago · 5 revisions  Pages 7 Home Demo 工程运行须知 VirtualAPK API 概 ...