使用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. ThreadFactory 线程池工厂

    import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; public class Thr ...

  2. Phpstorm Git 操作

    一.前提: 1.下载并安装好 Phpstorm 2.下载并安装好 Git 3.熟悉 Git 相关命令行操作 二.Git pull & commit(add): 下面简单说一下相关操作: Php ...

  3. rancher中级（一）（rancher的存储，网络）

    容器的存储机制 参考 http://dockone.io/article/128:http://dockone.io/article/129: Docker镜像是由多个文件系统(只读层)叠加而成.当我 ...

  4. JavaScript事件模型及事件代理

    事件模型 JavaScript事件使得网页具备互动和交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型.DOM2事件模型.IE事件模 ...

  5. (转)linux正则表达式详解

    linux正则表达式详解 http://blog.csdn.net/wuliowen/article/details/64131815 1:什么是正则表达式: 简单的说,正则表达式就是处理字符串的方法 ...

  6. ［转］logX<X对所有的X>0成立

    本文引用地址:http://blog.sciencenet.cn/blog-1865911-831450.html 此文来自科学网何召卫博客,转载请注明出处. 这个命题网上有多种证法,有人甚至采用斜率 ...

  7. ssm（Spring、Springmvc、Mybatis）实战之淘淘商城-第十四天(非原创）

    文章大纲 一.淘淘商城总体架构介绍二.淘淘商城重要技术点总结三.项目常见面试题四.项目学习(all)资源下载五.参考文章 一.淘淘商城总体架构介绍 1. 功能架构   2. 技术选型 (1)Sprin ...

  8. vs2013安装时提示核心功能错误

    VS核心功能安装时发生严重错误:解决办法:计算机管理->设备管理器->非即插即用驱动程序->http改为自动.

  9. .Net Core+mySqlSugar的一些稍复杂操作

    介绍一些我尝试的mysqlSugar的数据库操作 修改密码 var status = db.Update<Users>(new { password = user.password }, ...

  10. ubuntu安装robo3t

    直接在官网下载 解压文件(使用命令 tar -zxvf robo3t-1.2.1-linux-x86_64-3e50a65.tar.gz) 打开解压后的文件,进入bin文件,直接在终端运行 ./rob ...