使用inline-block之前先处理点小障碍：inline-block元素会有4px左右的空隙，这个是因为我们写代码时候的换行符所致。

解决办法很简单：在inline-block的父元素中设置样式font-size：0；letter-spacing: -4px; 然后设置inline-block的所有兄弟元素 font-size：值；letter-spacing: 值px;  恢复正常的显示。

另外还有一点需要注意的是inline-block默认是基线对齐的，而inline-block的基线又跟文本基线一致，所以在内容不同的时候并不能水平对齐。只需要用vertical-align显式声明一下top/bottom/middle对齐即可

display :inline-block 处理点小障碍的更多相关文章

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

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

  2. 2016/2/25 1， margin auto 垂直方向测试 无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

  3. display的block、none、inline属性及解释

    常会用到display对应值有block.none.inline这三个值 参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility ...

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

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

  5. display:inline; display:block;

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. webpack安装及使用

    npm run dev 第一次使用的时候用u盘将某些软件带过去. 所以要找到U盘 2.9.x的版本[推荐] 安装:npm install -g vue-cli 检测版本 vue -V/--versio ...

  2. JPA规范基础 ppt教程

    https://wenku.baidu.com/view/5ca6ce6a1eb91a37f1115cee.html

  3. (转)TComboBox patch for Delphi 7

    unit D7ComboBoxStringsGetPatch; // The patch fixes TCustomComboBoxStrings.Get method . interface {$I ...

  4. LeetCode 260 Single Number III 数组中除了两个数外，其他的数都出现了两次，找出这两个只出现一次的数

    Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...

  5. Linux得到某个文件夹内文件的个数

    panonum=$(find . -type f | wc -l)

  6. Carryon的字符串

    I J I: Carryon的字符串 时间限制: 1 s      内存限制: 128 MB      提交 我的状态 题目描述 Carryon最近喜欢上了一些奇奇怪怪的字符,字符都是英文小写字母,但 ...

  7. C# 枚举类型 enum （一）

    1.枚举使用enum关键字来声明,与类同级.枚举可以和类并列也可以 写在类里面,不能写在方法里. 2.枚举是值类型,隐式继承自System.Enum,不能手动修改. System.Enum本身是引用类 ...

  8. 二，JVM 自带命令行工具之JStat

    jstat:虚拟机统计信息见识工具 jstat是用于见识虚拟机各种运行状态信息的命令行工具.他可以显示本地或远程虚拟机进程中的类装载.内存.垃圾收集.JIT编译等运行数据. jstat option ...

  9. 工厂模式 jdbc 面向接口dao 开发 单例

    package com.itheima.utils; import java.io.IOException; import java.io.InputStream; import java.util. ...

  10. 说说C#中的enum吧

    enum,就是枚举类型,它是struct,int,single,double一样,都属于值类型,从ValueType类型中派生,存储在栈中.它在被创建时,不需要分配内在空间,所以对程序的性能是有好处的 ...