CSS - display:inline-block 相邻元素间有4px的空白间距
取消“display:inline-block 相邻元素间有4px的空白间距”
Demo:http://jsfiddle.net/JSDavi/p6gcx6nx/
例子:
<div sytle="display:inline-block; width:25%;background-color:blue;">aaaaaa</div>
<div sytle="display:inline-block; width:50%;background-color:red;">bbbbbb</div>
<div sytle="display:inline-block; width:25%;background-color:green;">ccccccc</div>
解决方案:
1、清除(inline-block)元素“</div>”和“<div>”的空白,
即上一元素的结束标签和下一元素的开始标签中不能出现空格、换行、内容,
只可能是注释;
2、对inline-block的父元素添加font-size:0;,对inline-block元素及兄弟元素各自设置font-size大小;
3、去掉display:inline-block,或改为display:block,并添加float:left;
CSS - display:inline-block 相邻元素间有4px的空白间距的更多相关文章
- CSS——display(Block none inline等)属性的用法
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
- CSS display:inline-block的元素特点:
将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,h ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- CSS display:inline和float:left两者区别探讨
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...
- [CSS3] CSS Display Property: Block, Inline-Block, and Inline
Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...
- 用Scala实现集合中相邻元素间的差值
欢迎转载,转载请注明出处,徽沪一郎. 概要 代码这东西,不写肯定不行,新学Scala不久,将实际遇到的一些问题记录下来,日后也好查找. 今天讲的是如何计算同一集合中元素两两之间的差值,即求开始集合(a ...
- css 给inline和inline-block元素设置margin和padding
经过简单的测试,行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的,下面来看一下剩下的margin-top ...
- css display:inline
- DIV CSS display(block,inline,none)的属性教程
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
随机推荐
- [bzoj1212][HNOI2004]L语言_AC自动机_动态规划
L语言 bzoj-1212 HNOI-2004 题目大意:给你一个n个单词的集合,然后给你m条字符串.问每条字符串可以被理解的最长前缀.被理解当且仅当存在一种分割使得每一段都是集合里的元素. 注释:$ ...
- CODEVS——T 1297 硬币
http://www.codevs.cn/problem/1297/ 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Descrip ...
- Javascript中数据实时推送
数据变化后前端需要更新,有几种方式:(参考http://www.xiaocai.name/post/cf1f9_7b6507) .利用setInterval函数,每隔n秒去异步拉取数据.对数据实时性要 ...
- 开启 J2EE(五)— Servlet之状态管理
HTTP无状态协议 首先我们要知道: HTTP协议是无状态协议. 我们知道HTTP协议就是server通过Request从浏览器接收和Response向浏览器输出的这么一个过程(浏览器和server的 ...
- mysql选择上一条、下一条数据记录,排序上移、下移、置顶
1.功能须要 完毕列表排序上移,下移,置顶功能.效果例如以下图所看到的: 2设置思路 设置一个rank为之间戳,通过选择上移,就是将本记录与上一条记录rank值交换,下移就是将本条记录与下一条记录ra ...
- Cocos2d-x 3.0final 终结者系列教程13-贪食蛇游戏案例(全)
快过节了.谢谢了屈原,我们爱你. 应该多几个向屈大人一样跳江的,这样我们就能够放假纪念啦. ---------------------------------快过节了.弄个案例,大家最好还是假期做做, ...
- 曲线控件我一直用codeproject上的那几个(C++ 100款开源界面库)
Alberl#23楼[楼主] 2013-11-04 11:47 Alberl @baita00引用看了大神的教程,真的不错,学习了很多东西,^_^.这节教程里,大神好像在找曲线控件,是吗?大神有什特殊 ...
- 5187: [Usaco2018 Jan]Sprinklers
#include<cstdio> #include<iostream> #include<cstring> #include<cstdlib> #inc ...
- oracle中关于删除表purge语句和闪回语句的基本使用
语法: drop table ... purge; 例子:drop table test purge; purge是直接删除表,不保留到回收站,10G开始默认drop表式改名移动到回收站; 闪回(fl ...
- [POJ 3621] Sightseeing Cows
[题目链接] http://poj.org/problem?id=3621 [算法] 01分数规划(最优比率环) [代码] #include <algorithm> #include &l ...