使用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. iMessenger 2.0.14.0801简述

    有些梦,看似遥不可及.但并非不能实现,仅仅要你足够的强!!.人力有时而穷,所以我们可能还须要一些热心人的帮助.这个人可能就是你. 四年来,我们一直在努力,从未放弃. 在我们做好一件事之前.我们永远不知 ...

  2. oracle入门（3）——oracle服务解释

    [本文介绍] oracle不像mysql,安装后之后一个服务,如果mysql连接不上,打开其服务就行.oracle是有多个服务,哪些服务要开,哪些服务没必要开,对新手来说未必不是一个难点.下面对ora ...

  3. struts 文件下载 annotation 注解版

    [本文简介] 本文将简单介绍使用 struts2 ,通过零配置和 annotation 实现文件下载功能. [文件夹结构] [web.xml有关struts的配置] <filter> &l ...

  4. 采集baidu搜索信息的java源代码实现（大部分转发，少量自己修改）（使用了htmlunit和Jsoup）(转发：https://blog.csdn.net/zhaohang_1/article/details/44731039)

    1.maven依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  5. decorator ＆ generator ＆ iterator

    装饰器(decorator): @staticmethod @classmethod 都既可以使用类名访问,也可以使用对象名访问, 但classmethod在定义时需要cls参数 生成器(genera ...

  6. crm--业务点详细概述

    一.CRM简介:(为什么开发CRM) 此项目主要供自己的公司使用,原来因为公司人员较少,人员管理考勤等都用excel保存.但是现在因为公司人员,以及部门增多,为了方便管理 ,供销售人员使用内部系统更方 ...

  7. knit使用安装 ecstore knit位置 及调用路径

    菜鸟一枚,接触php不久. 情况一: 最简单的: windows下, php文件引用kint 将kint放入c盘 php/pear下,我一般将kint包改名字为kint 结构如下: c:/php/pe ...

  8. Spring mvc 具体RequestMapping 参数含义

    今天遇到碰到有人问我个问题,RequestMapping中参数的意义,哎呀傻眼了,果断查资料,这下知道了. http://blog.csdn.net/kobejayandy/article/detai ...

  9. Java分布式：JWT(JSON Web Tokens)

    Java分布式:JWT(JSON Web Tokens) 0.优势 Session方式存储用户状态占用大量服务器内存.一般而言,大型应用还需要借助一些KV数据库和一系列缓存机制来实现Session的存 ...

  10. nginx3

    Yum安装更简单.安装并启动keepalived,表示安装成功.有3个进程. etc\keepalived\keepalived.conf: 备的keepalived配置文件: ! Configura ...