display:inline-block的间隙问题和解决办法
1、display:inline-block在水平方向的间隙；
代码如下：
<style type="text/css">
*{margin:0; padding:0;}
.test{width:600px; border:1px blue solid;}
.test div{width:100px; height:100px; display:inline-block;background:blue;}
</style>
</head>
<body>
<div class="test">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
效果如下：
四个div之间有小间距，解决办法：让水平间隙消失就是在父级上加font-size:0;让垂直间隙消失，就在子元素上加vertical-align:bottom;就不贴代码了，
如果子标签内加上任意文字，则display:inline-block元素不会生成垂直方向有空白！ 下面是解决好的效果：
display:inline-block的间隙问题和解决办法的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- 行内块inline-block元素之间出现空白间隙原因及解决办法
首先,来看下具体的问题,下面是用inline-block布局实现的两边固定宽度,中间自适应的html代码: 1 2 3 4 5 6 7 8 9 <section class="layo ...
- IE6中的常见BUG与相应的解决办法
开发前端的同学一定都知道,IE6是兼容BUG最多的浏览器,它不支持PNG alpha通道暂且不论.其文档的解析理解规范也引起了诸多恼人的BUG,有时甚至让人感到绝望.本文主要讲解一些比较容易遇到的IE ...
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline; display:block;
block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...
- display:inline 跟 display:block 跟 display:inline-block区别
我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...
随机推荐
- python之numpy
一.矩阵的拼接合并 列拼接:np.column_stack() >>> import numpy as np >>> a = np.arange(9).reshap ...
- 【UWP】通过特定URI打开Win10指定设置页面[转]
系统设置其实也是一个Modern应用,它与ms-settings:协议进行了关联. 在设置应用中的每一个具体的设置页面都有一个URI(统一资源标识符)与之对应,通过这些URI就可以直达某个具体的设置页 ...
- 高可用mysql之MHA的原理
MHA 如何工作的? MHA是如何工作的? ============================================================================== ...
- Html报表用Excel打开保持表格线【Html报表模板】
注:本人调试的最简版,前两处红色部分是为了输出Excel表格线:x:str表示输出为文本样式,避免被输出为科学计数法. <!DOCTYPE html PUBLIC "-//W3C//D ...
- python多种格式数据加载、处理与存储
多种格式数据加载.处理与存储 实际的场景中,我们会在不同的地方遇到各种不同的数据格式(比如大家熟悉的csv与txt,比如网页HTML格式,比如XML格式),我们来一起看看python如何和这些格式的数 ...
- 双向数据绑定（angular,vue）
最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue. angular众所周知是使用的脏检查($dirty).一开始大家会认为angular开启了类似setInter ...
- linux 下串口独占方式打开
参考文章: http://blog.csdn.net/rl529014/article/details/51336161 http://blog.csdn.net/lin_fs/article/de ...
- 学习 opencv---(8)非线性滤波：中值滤波，双边滤波
正如我们上一篇文章中讲到的,线性滤波可以实现很多种不同的图像变换.然而非线性滤波,如中值滤波器和双边滤波器,有时可以达到更好的实现效果. 邻域算子的其他一些例子还有对 二值图像进行操作的形态学算子,用 ...
- Debian8升级4.5内核
本文讲述如何升级Debian8的内核到4.5版本 0x01:去linux kernel官网https://www.kernel.org/下载4.5的内核,选择tar.xz格式 0x02:想办法把下载好 ...
- 设计模式--适配器模式Adapter（结构型）
一.适配器模式 适配器模式的主要作用是在新接口和老接口之间进行适配.将一个类的接口转换成客户端期望的另外一个接口.其实适配器模式有点无赖之举,在前期设计的时候,我们就不应该考虑适配器模式,而应该通过重 ...