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 ...
随机推荐
- php数组操作集锦- 掌握了数组操作, 也就掌握了php
参考下面的文章, 是很好的: http://www.cnblogs.com/staven/p/5142515.html http://pcwanli.blog.163.com/blog/static/ ...
- Java优先队列
按照Java api的说法: java.util.PriorityQueue.PriorityQueue() Creates a PriorityQueue with the default init ...
- Spring标签<mvc:annotation-driven/>解读
一.AnnotationDrivenBeanDefinitionParser 通常如果我们希望通过注解的方式来进行Spring MVC开发,我们都会在***-servlet.xml中加入<mvc ...
- 关于struts2的过滤器和mybatis的插件的分析
网上一搜,发现一篇写的非常棒的博文,就直接复制过来了,供以后复习使用. 前辈博文链接:共三篇: http://jimgreat.iteye.com/blog/1616671: http://jimgr ...
- HDOJ 4770 Lights Against Dudely
状压+暴力搜索 Lights Against Dudely Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- Android如何一进入一个activity就唤醒键盘
方法总结: 在AndroidManife.xml中对应的的Activity配置中加入以下配置项: android:windowSoftInputMode="stateVisible|adju ...
- C++11中自定义range
python中的range功能非常好用 for i in range(100): print(i) 现在利用C++11的基于范围的for循环特性实现C++中的range功能 class range { ...
- MarkdownPad 2 在win10下出错:HTML 渲染错误(This view has crashed) 的解决办法 + MarkdownPad2.5 注册码
首先附上MarkdownPad2.5的注册码. 邮箱:Soar360@live.com 授权密钥: GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImD ...
- js_闭包
先从闭包特点解释,应该更好理解.闭包的两个特点:1.作为一个函数变量的一个引用 - 当函数返回时,其处于激活状态.2.一个闭包就是当一个函数返回时,一个没有释放资源的栈区.其实上面两点可以合成一点,就 ...
- 如何用qq代理发送邮件
今天我想写一篇服务器发送验证邮件的的文章,我查阅过其他博客里面写的文章,都是可以实现的,但是对于初学者来说是一个很痛苦的事情,很多代码看不懂,原因有多种,写的多,写的乱,然后就不想往下看了.我今天详细 ...