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元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
随机推荐
- hdu 1598 暴力+并查集
#include<stdio.h> #include<stdlib.h> #define N 300 int pre[N]; int find(int u) { if(u!=p ...
- HDU - 3040 - Happy Girls
先上题目: Happy Girls Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- spring5.0新特性
spring5.0新特性 学习了:http://blog.csdn.net/u012562943/article/details/77449666 https://www.cnblogs.com/xu ...
- JS禁用微信复制链接、禁用转发
$(function () { function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu'); } if (typeof Weixi ...
- c26---文件包含include
// // main.c // 文件包含 #include <stdio.h> // 函数可以重复声明, 但不能重复定义 void test(); void test(); void te ...
- POJ3349 Language: Snowflake Snow Snowflakes
POJ3349 Language: Snowflake Snow Snowflakes 题目:传送门 题解: 链表+hash的一道水题 填个坑补个漏... 代码: #include<cstdio ...
- Linq的Except
https://msdn.microsoft.com/en-us/library/bb300779(v=vs.100).aspx , , , }; , , , }; var list = list1. ...
- LeetCode Weekly Contest 22
1. 532. K-diff Pairs in an Array 分析:由于要唯一,所以要去重,考虑k=0,时候,相同的数字需要个数大于1,所以,先用map统计个数,对于k=0,特判,对于其他的,遍历 ...
- C - Oleg and shares
Problem description Oleg the bank client checks share prices every day. There are n share prices he ...
- lua math.random()
math.random([n [,m]]) 用法:1.无参调用,产生[0, 1)之间的浮点随机数. 2.一个参数n,产生[1, n]之间的整数. 3.两个参数,产生[n, m]之间的整数. math. ...