inline-block空隙怎么解决
方法一:移除空格
元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以:
<div class="space">
<a href="##">
惆怅</a><a href="##">
淡定</a><a href="##">
热血</a>
</div>
或者是:
<div class="space">
<a href="##">惆怅</a
><a href="##">淡定</a
><a href="##">热血</a>
</div>
或者是借助HTML注释:
<div class="space">
<a href="##">惆怅</a><!--
--><a href="##">淡定</a><!--
--><a href="##">热血</a>
</div>
方法二:使用margin负值
.space a {
display: inline-block;
margin-right: -3px;
}
margin负值的大小与上下文的字体和文字大小相关,间距对应大小值可以参见“基于display:inline-block的列表布局
例如,对于12像素大小的上下文,Arial字体的margin
负值为-3
像素,Tahoma和Verdana就是-4
像素,而Geneva为-6
像素。
由于外部环境的不确定性,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。
方法三:让闭合标签吃胶囊
如下处理:
<div class="space">
<a href="##">惆怅
<a href="##">淡定
<a href="##">热血</a>
</div>
注意,为了向下兼容IE6/IE7等喝蒙牛长大的浏览器,最后一个列表的标签的结束(闭合)标签不能丢。
在HTML5中,我们直接:
<div class="space">
<a href="##">惆怅
<a href="##">淡定
<a href="##">热血
</div>
方法四:使用font-size:0
如下处理:
.space {
font-size: 0;
}
.space a {
font-size: 12px;
}
这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加:
类似下面的代码:
.space {
font-size: 0;
-webkit-text-size-adjust:none;
}
方法五:使用letter-spacing
如下处理:
.space {
letter-spacing: -3px;
}
.space a {
letter-spacing: 0;
}
方法六:使用word-spacing
如下处理:
.space {
word-spacing: -6px;
}
.space a {
word-spacing: 0;
}
一个是字符间距(letter-spacing
)一个是单词间距(word-spacing
),大同小异。据我测试,word-spacing
的负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,貌似,word-spacing
即使负值很大,也不会发生重叠。
inline-block空隙怎么解决的更多相关文章
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- python中IndentationError: expected an indented block错误的解决方法
IndentationError: expected an indented block 翻译为IndentationError:预期的缩进块 解决方法:有冒号的下一行要缩进,该缩进就缩进
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- block循环饮用解决
在block中使用self会引起循环引用导致无法释放. 解决: __weak typeof(self) weakSelf = self; 例如: NSLog(@"init--> val ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- CSS HACK tab制表符导致行内元素之间的空隙如何解决
<!DOCTYPE html> <html lang="zh-CN"><head> <meta name="viewport&q ...
随机推荐
- Windows Server服务器之Linux server与windows server的区别
Linux server与windows server的区别用linux做server,相对于windows server有什么优势? 首先,平均故障时间少,只要配置和使用得当,linux的平均故障( ...
- vue绑定属性、绑定class及绑定style
1.绑定属性 v-bind 或者 : 例如:<img :src="pic_src" /> <template> <div id="app& ...
- bzoj 1233: [Usaco2009Open]干草堆tower 【想法题】
首先这题的$n^3$的DP是比较好想的 $f[i][j]$表示用前$i$包干草 且最顶层为第$j+1$包到第$i$包 所能达到的最大高度 然而数据范围还是太大了 因此我们需要去想一想有没有什么单调性 ...
- R 数据分析
目录: windows命令行中执行R dataframe 常用函数.变量 1.windows命令行中执行R 前提:已经把R的命令目录加入了系统路径中. 在windows中,命令行执行R可以用以下两种方 ...
- opensuse 安装APACHE2+MYSQL+PHP5
sudo zypper in apache2-mod_php5 apache2 mariadb 装好后, 记得启动APACHE2对PHP的支持: a2enmod php5 默认mysql密码为空, 可 ...
- The SDK directory '/home/wangju/gitProject/Automation/D:\Android_SDK' does not exist.
执行gradle clean命令报错 gradle clean FAILURE: Build failed with an exception. * What went wrong: A proble ...
- 测开之路四十五:Django之最小程序
安装Django库 Django最小程序 import sysfrom django.conf.urls import urlfrom django.conf import settingsfrom ...
- 后台获取html控件的值
string name = Request.Form["Name1"].ToString(); “xxx” 里的是name值 Request["xx"]取到相同 ...
- Cocos2d-x之Vector<T>
| 版权声明:本文为博主原创文章,未经博主允许不得转载. Vector<T>是Cocos2d-x 3.x中推出的列表容器,在cocos2d-x3.0之前的版本是Array,因此它所能容 ...
- Python中单下划线和双下划线
1.双下划线开头和结尾 Python中存在一些特殊的方法,有些方法以双下划线 “__” 开头和结尾,它们是Python的魔法函数,比如__init__()和__str__等等.不用要这种方式命名自己的 ...