使用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. H5页面开发的touchmove事件

    在做一屏滚动的H5页面的时候,必须移除touchmove事件,如果不移除,在安卓机上会触发微信原生的向下滚动拉出刷新.在IOS上出现上下都可以继续滑动,所以需要移除document的touchmove ...

  2. javascript数组常用的遍历方法

    本篇文章给大家带来的内容是关于javascript数组常用的遍历方法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言 本文主要介绍数组常见遍历方法:forEach.m ...

  3. 爬虫（AJEX）——豆瓣动态页面

    工具:python3 解释:Ajax 是一种用于创建快速动态网页的技术,在无需重新加载整个网页的情况下,能够更新部分网页的技术. 目标:爬取使用Ajex结束的豆瓣网页 import urllib.re ...

  4. Unity (反向动力学)IK动画

  5. 牛客网Java刷题知识点之表达式类型的自动提升

    不多说,直接上干货!

  6. nginx 添加https支持

    自行颁发不受浏览器信任的SSL证书为晒晒IQ网颁发证书.ssh登陆到服务器上,终端输入以下命令,使用openssl生成RSA密钥及证书. # 生成一个RSA密钥 $ openssl genrsa -d ...

  7. SpringMVC04 很杂很重要（注解，乱码处理，通配符，域属性调用，校正参数名称，访问路径，请求、响应携带参数，请求方法）

    1.导入架包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3 ...

  8. Xcode警告忽略

    Xcode中 cmd+B 之后总会出现各种各样的警告,对于一个对代码有洁癖的人,这种情况很难忍,接下来我们用些特殊手段强制消除这些警告  一.忽略源文件中的警告 使用编译器宏来操作 #pragma c ...

  9. KBEngine warring项目源码阅读（一） 项目简介和注册

    首先介绍下warring项目,是kbe自带的一个演示示例,大部分人了解kbe引擎也是从warring项目开始的. 项目地址:https://github.com/kbengine/kbengine_u ...

  10. 消息中间件之MQ详解及四大MQ比较

    一.消息中间件相关知识 1.概述 消息队列已经逐渐成为企业IT系统内部通信的核心手段.它具有低耦合.可靠投递.广播.流量控制.最终一致性等一系列功能,成为异步RPC的主要手段之一.当今市面上有很多主流 ...