使用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. 我的Android进阶之旅------>解决Jackson、Gson解析Json数据时，Json数据中的Key为Java关键字时解析为null的问题

    1.问题描述 首先,需要解析的Json数据类似于下面的格式,但是包含了Java关键字abstract: { ret: 0, msg: "normal return.", news: ...

  2. ajax请求真实服务器数据示例

    // http://study.163.com/webDev/couresByCategory.htm // http://study.163.com/webDev/couresByCategory. ...

  3. Spark学习笔记--安装SCALA和IDEA开发环境

    一:安装Scala

  4. LeetCode：数组中的第K个最大元素【215】

    LeetCode:数组中的第K个最大元素[215] 题目描述 在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: ...

  5. webservice -- cxf客户端调用axis2服务端

    背景: 有个项目, 需要由第三方提供用户信息, 实现用户同步操作, 对方给提供webservice接口(axis2实现)并也使用axis2作主客户端调用我方提供的webservice接口 起初, 由于 ...

  6. module.exports和exports得区别

    对module.exports和exports的一些理解 可能是有史以来最简单通俗易懂的有关Module.exports和exports区别的文章了. exports = module.exports ...

  7. C# 获取当前星期几

    private static string GetWeekName() { string weekName = ""; switch (DateTime.Now.DayOfWeek ...

  8. 【WIN7】windows\system32 下的几乎所有文件的简单说明【1】

    1: aclui.dll .....Security Descriptor Editor,没有它,注册表编缉器会无法运行 2: ACTIVEDS.DLL .....(ADs 路由层 DLL). 没有它 ...

  9. AMBA总线基础知识简介

    AMBA:Advanced Microcontroller Bus Architecture,是ARMA公司的片内互联总线协议. 1995 - AMBA1.0 APB外设总线及ASB系统总线发布. 1 ...

  10. windows vs 编译tesseract-ocr

    第一把所有相关的代码都下载,github最方便 https://github.com/tesseract-ocr/tesseract 要点1.cppan c++的中文管理包,很方便,需要翻-墙,安装包 ...