使用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. Spring ThreadPoolTaskExecutor队列满的异常处理

    <!-- 配置线程池 --> <bean id="threadPool" class="org.springframework.scheduling.c ...

  2. json java simple-json

    http://code.google.com/p/json-simple/wiki/EncodingExamples#Example_1-1_-_Encode_a_JSON_object javac ...

  3. web.config文件executionTimeout的单位

      executionTimeout:表示允许执行请求的最大时间限制,单位为秒

  4. CentOS6.5 环境安装配置

    一.GO环境配置 1.运行命令进入/usr/local/src目录:cd /usr/local/src 2.下载安装包:运行wget --no-check-certificate https://st ...

  5. 解决移动端浏览器页面 X轴横向滚动条问题

    写web端页面的时候,总是会出现横向滚动条,即 X 轴滚动条,导致页面左右滑来滑去. 即使设置了 body,html {overflow-x:hidden;width:100%;} 也无法生效. 解决 ...

  6. 一些C/C++中的函数

    项目中使用到的C/C++中的一些函数,记录下来加以理解和掌握. 1.memset( ) memset是计算机中C/C++语言函数.将s所指向的某一块内存中的前n个 字节的内容全部设置为ch指定的ASC ...

  7. python 实例方法，类方法，静态方法

    实例方法 class Human(object): def __init__(self, weight): self.weight = weight def get_weight(self): ret ...

  8. Android商城开发系列（十三）—— 首页热卖商品布局实现

    热卖商品布局效果如下图: 这个布局跟我们上节做的推荐是一样的,也是用LinearLayout和GridView去实现的,新建一个hot_item.xml,代码如下所示: <?xml versio ...

  9. COGS 1043. [Clover S2] Freda的迷宫

    ★   输入文件:mazea.in   输出文件:mazea.out   简单对比时间限制:1 s   内存限制:128 MB Freda 的迷宫 (mazea.pas/.c/.cpp) 题目叙述 F ...

  10. 详细讲解：使用tp3.2.3完成简单的注册登录功能

    使用3.2.3进行了一个简单不过的注册登录功能,界面介绍: 1.注册: 2.登录: 3.登录成功后: 没错,就是简单的让你特别容易上手,上面运用到的知识有: (1)自动验证.自动完成 (2)sessi ...