设置display:inline-block 元素间隙
上代码:
<div class="page">
<a href="" class="num">共1231条</a>
<a href="" class="">首页</a>
<a href="" >1</a>
<a href="" >2</a>
<a href="" >3</a>
<a href="" >4</a>
<a href="" class="">末页</a>
</div>
.pgae a{
display: inline-block;padding: 9px 15px;height: 40px;border: 1px solid #979797;color: #333font-size: 16px;line-height: 22px;}

a标签之间 有间隙 是因为 页面 中有空格的问题
自己最常用的方法是 给 .page 设置font-size:0 或者直接 把display换成float当然还有很多方法
1.可以改变格式将a标签间距去掉:<a href="" >3</a><a href="" >4</a> ,但是如果是php或者别的方法循环出来的数据就比较难实现了。
2.可以发现中间的间隙其实也是字体(font-size:0会奏效),所以可使用letter-spacing:-X(不同浏览器值可能不同),还是给父容器(.page)设置然后再给a标签恢复。
......
设置display:inline-block 元素间隙的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- display inline or block
一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margi ...
- float:left 与display:inline的具体区别?
设了float:left的元素允许它的右边存在任何元素同行显示,不论是内联元素还是块元素.但它的左边还是不允许存在任何元素与之同行显示,哪怕其它的元素的代码在前,除非也给前面的元素加上float:le ...
- display:block inline-block inlined的区别
一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margi ...
- display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...
- 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 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
随机推荐
- 远程连接Linux下mysql报10061
最近接到一个新活,四台Linux服务器配置MySQL热机双备+IP隧道LVS集群服务,尽管好想使个眼神杀死老大,但特么心里是感激的.不多说一口气装了n个Ubuntu-server. 每次在虚拟机装完M ...
- JS水仙花数
题目:3位数==个位立方+十位的立方+百位的立方.这个3位数就是水仙花数.要求打印出所有的水仙花数 <body> <div id=d1> </div> <sc ...
- mysql必知必会--用正则表达式 进行搜索
正则表达式介绍 前两章中的过滤例子允许用匹配.比较和通配操作符寻找数据.对 于基本的过滤(或者甚至是某些不那么基本的过滤),这样就足够了.但 随着过滤条件的复杂性的增加, WHERE 子句本身的复杂性 ...
- 利用低代码优化人力资源配置,为软件开发降本提效 ZT
低代码 是一种主要应用于企业信息化领域的快速开发技术.借助低代码,开发者无需编码即可生成企业应用的常见功能,少量编码能开发出更多扩展功能.有了低代码技术,IT团队甚至业务团队都可以参与到编写应用程序当 ...
- 在pycharm中如何设置代码对齐竖线
方法:启动pycharm软件,打开一个文件,点 file 菜单,选择 settings,在弹出的setting菜单中依次选择editor-->general-->appearance,然后 ...
- SpringBoot缓存 --(一)EhCache2.X
简介: Spring 3.1中开始对缓存提供支持,核心思路是对方法的缓存,当开发者调用一个方法时,将方法的参数和返回值作为key/value缓存起来,当再次调用该方法时,如果缓存中有数据,就直接从缓存 ...
- thingsboard入坑记(一)本机编译运行
开发环境: windows10 x64 专业版 工具准备: git 2.16.2 windows命令行版 java jdk 1.8:https://www.cnblogs.com/harmful-ch ...
- python函数的使用
python函数的使用 制作人:全心全意 函数的定义 def 函数名(参数): 函数体 参数的使用 def 函数名(a): 函数体 函数名(5) 默认函数 def 函数名(a=5): 函数体 函数名( ...
- 第3章 关系数据库标准语言SQL(重点) | 数据库知识点整理
第3章 关系数据库标准语言SQL(重点) 了解 SQL语言发展过程 关系数据库技术和关系数据库管理系统RDBMS产品的发展过程 掌握 SQL语言的特点和优点 面向过程的语言和SQL语言的区别 关系数据 ...
- .net生成PDF文件的几种方式
以下为在.net mvc中,生成pdf的几种方式,资料都是在做项目时网上找的 1.使用Microsoft.Office.Interop.Word.dll将word转换为PDF dll可以单独下载,一般 ...