设置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 ...
随机推荐
- oracle-11g-R2监听文件配置
客户端连接oracle数据库时出现如下错误: Listener refused the connection with the following error: ORA-, TNS:listener ...
- 谈下slot-scope
Vue里有个slot插槽的概念,常用的一般是命名的slot和默认的slot, 这里谈下slot-scope,Vue2.6后改成v-slot slot-scope场景是父组件用子组件的数据,但是样式自己 ...
- 12.python内置模块之sys模块介绍
python的sys模块是与python解释器交互的一个接口,提供对解释器使用或维护的一些变量的访问,即与解释器强烈交互的函数. sys模块的常用函数: 1.sys.argv:命令行参数列表.第一个元 ...
- 初窥ECharts
近来趁着空闲时间了解了一下 ECharts.也顺带记录一番. 首先要从下载ECharts库,这个从官网可以直接下载. 引入ECharts.JS <head> <meta charse ...
- cesium1.63.1api版本贴地贴模型量算工具效果(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材.不少 ...
- MySQL服务器的运维与优化
MySQL运维 安装数据库 配置本地yum源,将gpmall-repo文件上传至/opt目录 创建yum.repo文件 安装mariadb服务 # yum install -y mariadb mar ...
- redis集群redis-cluster搭建
redis集群搭建--参考微信公众号(诗情画意程序员):https://mp.weixin.qq.com/s/s5eJE801TInHgb8bzCapJQ 这是来自redis官网的一段介绍,大概意思就 ...
- O2O外卖玩众包 开放平台难解标准之痛
开放平台难解标准之痛" title="O2O外卖玩众包 开放平台难解标准之痛"> 有一种怪现象一直是国内互联网企业摆脱不了的附骨之疽--不管规模大小,总是削尖了脑 ...
- 03.JS运算符
前言: 学习一门编程语言的基本步骤 (01)了解背景知识 (02)搭建开发环境 (03)语法规范 (04)常量和变量 (05)数据类型 (06)数据类型转换 (07)运算符7.运算符 表达式:由运 ...
- python-21-生成器又是什么东西?
前言 生成器,只要含有yield关键字的函数都是生成器函数,但yield不能和return共用且需要写在函数内. 生成器,是返回一个迭代器的函数,说白了生成器也是迭代器. 一.生成器简介 1.只要含有 ...