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元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
随机推荐
- Linux查看 kennel , 物理CPU个数、核数、逻辑CPU个数
other article on my list: 查看进程 https://i.cnblogs.com/PostDone.aspx?postid=9231604&actiontip=%E4% ...
- 洛谷 P2979 [USACO10JAN]奶酪塔Cheese Towers
P2979 [USACO10JAN]奶酪塔Cheese Towers 题目描述 Farmer John wants to save some blocks of his cows' delicious ...
- Python学习-生成器 - Generator
简单来说,generator是一个能够返回迭代器对象的函数. yield的使用: 在python中,当你定义一个函数,使用了yield关键字时,这个函数就是一个生成器,它的执行会和其他普通的函数有很多 ...
- PHP扩展开发--实验成功
原文:http://kimi.it/496.html http://blog.csdn.net/u011957758/article/details/72234075 ---------------- ...
- AOJ 0121 Seven Puzzle {广度优先搜索}(*)
原题 题意 题意是有一个输入,比方: 1 0 2 3 4 5 6 7 摆成例如以下形状: 1 0 2 3 4 5 6 7 0表示空格.其它数字能够移动到0的位置.最后须要到例如以下形状: 0 1 2 ...
- 【cl】cmd相关命令
cd 进入目录 dir 列出当前目录下的文件[在linux上是ls] e: 进入E盘 tab键可以快速进入目录
- JVM —— Java 对象占用空间大小计算
零. 为什么要知道 Java 对象占用空间大小 缓存的实现: 在设计 JVM 内缓存时(不是借助 Memcached. Redis 等), 须要知道缓存的对象是否会超过 JVM 最大堆限制, 假设会超 ...
- 36岁IT老人再次随笔——程序员的门槛其实并不高,但却是一个易学难精的行当——IT的快车很快,我常看到不少人摔落下去,但又有不少身手敏捷的人跳了上来 good
36岁的我,还在IT里面留恋着技术.我不是什么技术牛人,只是不愿离开.搞硬件的朋友对我说:“我以为你是搞硬件的,没想到你软件方面这么厉害?”,搞软件的朋友对我说:“我以为你只是搞软件的,没想到你硬件方 ...
- ASP.NET Razor - C# and VB Code Syntax
http://www.w3schools.com/aspnet/razor_syntax.asp Razor supports both C# (C sharp) and VB (Visual Bas ...
- nyoj--745--蚂蚁的难题(二)
蚂蚁的难题(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 下雨了,下雨了,蚂蚁搬家了. 已知有n种食材需要搬走,这些食材从1到n依次排成了一个圈.小蚂蚁对每种食材 ...