使用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. django 多并发，多线程。

    参考http://blog.csdn.net/u013378306/article/details/76215982 django 原生为单线程序,当第一个请求没有完成时,第二个请求辉阻塞,知道第一个 ...

  2. Spring-Spring概述

    Spring概述 Spring是最受欢迎的企业级Java应用程序开发框架.数以百万的来自世界各地的开发人员使用Spring框架来创建好性能.易于测试.可重用的代码. Spring框架是一个开源的Jav ...

  3. 004-java类保存优化

    设置路径:windows→preferences→java→editer→save Actions 1.设置如下 2.可单击右侧configure配置 2.1.code organorganizing ...

  4. Redis二（Hash操作）

    Hash操作 Hash操作,redis中Hash在内存中的存储格式如下图: hset(name, key, value) 1 2 3 4 5 6 7 8 9 # name对应的hash中设置一个键值对 ...

  5. Python HTML Resolution Demo - SGMLParser & PyQuery

    1. SGMLParser: 这里定义了一个Parse类,继承SGMLParser里面的方法.使用一个变量is_h4做标记判定html文件中的h4标签,如果遇到h4标签,则将标签内的内容加入到Pars ...

  6. Phpstorm 换行设置（复制 http://jingyan.baidu.com/article/86fae346b2cb673c49121ad3.html）

    很多时候代码太长超出了屏幕的宽度,默认情况下没有自动换行的,我们需要把光标往后挪,才能看到后面代码,显得略为蛋疼,我个人比较喜欢能够自动换行. 下面就说下Phpstorm里如何默认开启自动换行(use ...

  7. dymaic方式的Json序列化

    from:http://stackoverflow.com/questions/3142495/deserialize-json-into-c-sharp-dynamic-object If you ...

  8. Linux 初始化之 Systemd机制

    systemd是Linux下的一种init软件,由Lennart Poettering带头开发,其开发目标是提供更优秀的框架以表示系统服务间的依赖关系,并依此实现系统初始化时服务的并行启动,同时达到降 ...

  9. CentOS 7如何将.deb文件转换.rpm

    1.首先下载alien工具 http://ftp.de.debian.org/debian/pool/main/a/alien/  http://ftp.de.debian.org/debian/po ...

  10. Oracle 集合操作

    在 Oracle 中提供了三种类型集合操作:并(UNION).交(INTERSECT).差(MINUS) · UNION:将多个查询的结果组合到一个查询结果之中,没有重复内容 · UNION ALL: ...