前几天写一个页面

div{width:900px;}
div li{ display:inline-block; width:300px;}
<ul>
<li></li>
  <li></li>
  <li></li>
</ul>

 发现宽度为900px的div居然放不下3个宽度为300px的内联元素li,只好改用了float:left来布局。后来上网一查,才知道inline-block是有默认间距的,默认间距为4px,并且inline也是有默认间距。现在就来盘点一些解决inline-block元素和inline元素之间间距的一些方法:

1、可以在html中直接把元素写在一行上或把闭合标签和第二个开始标签写在一行或两行间添加注释或直接去掉闭合标签但最后一个不能去掉。

2、设置margin-right为负值,但要考虑上下文的字体和文字大小。

3、先设定子元素字体,再设置父元素font-size:0px;////chrome中:-webkit-text-size-adjust:none;

4、设置父元素letter-spacing或word-spacing为负值,要考虑字体,子元素有文字也要注意设置letter-spacing或word-spacing的值。

5.float:left;

如何去除掉inline-block元素之间的默认间距的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  3. 在Chrome与火狐中,输入框input类型为number时,如何去除掉的自带的上下默认箭头

    如何移除input='number'时浏览器自带的上下箭头: CSS样式: /* 去除input[type=number]浏览器默认的icon显示 */ input::-webkit-outer-sp ...

  4. 关于block元素和inline元素

    呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...

  5. inline元素、block元素

    inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...

  6. block元素和inline元素的特点

    一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...

  7. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  8. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  9. inline元素、block元素、inline-block元素

    inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...

随机推荐

  1. 经典SQL语句大全_主外键_约束

    一.基础(建表.建约束.关系) 约束(Constraint)是Microsoft SQL Server 提供的自动保持数据库完整性的一种方法,定义了可输入表或表的单个列中的数据的限制条件(有关数据完整 ...

  2. Android学习系列(28)--App集成支付宝[已过期]

    手机的在线支付,被认为是2012年最看好的功能,我个人认为这也是移动互联网较传统互联网将会大放光彩的一个功能.人人有手机,人人携带手机,花钱买东西,不再需要取钱付现,不再需要回家上网银,想买什么,扫描 ...

  3. 【ruby on rail 项目之 VPS下载机】

    [idea] 感觉互联网上国内难以下载资源的资源,通过VPS下载后再拖回来,想做个集成功能的.这里定个计划.打算开始做,项目会在github上同步更新. [start]

  4. linux扩展权限

    扩展权限包括s,g,t 对于创建文件或文件夹由umask值来决定共默认权限 普通用户默认是0002 root有户是0022 目录的默认权限是777-umask(普通用户775 root是755) 文件 ...

  5. bzoj 3122 [Sdoi2013]随机数生成器(逆元,BSGS)

    Description Input 输入含有多组数据,第一行一个正整数T,表示这个测试点内的数据组数.    接下来T行,每行有五个整数p,a,b,X1,t,表示一组数据.保证X1和t都是合法的页码. ...

  6. HIbernate学习笔记(七) hibernate中的集合映射和继承映射

    九.       集合映射 1. Set 2. List a)        @OrderBy 注意:List与Set注解是一样的,就是把Set更改为List就可以了 private List< ...

  7. [学姿势]实验室搬砖+node学习

    这周开始进行收尾工作,我当然没有进行核心技术的开发,主要负责的是对web端进行展示上的修修补补,主要包括添加VLC播放器.rtsp视频流以及一些js细节. 1.VLC 全称为Video Lan Cli ...

  8. PCB编辑快捷键

    TAB: 调节属性PgUp: 放大PgDn: 缩小Delete: 删除Ctrl+C: 复制Ctrl+V: 粘贴Ctrl+X: 剪贴Ctrl+Z: 撤销Ctrl+Y: 取消撤销Ctrl+F: 查找Ctr ...

  9. 《数据通信与网络》笔记--QoS

    QoS(Quality of Service)服务质量,是网络的一种安全机制, 是用来解决网络延迟和阻塞等问题的一种技术. 1.QoS参数 衡量服务质量QoS的参数主要包括: 端到端延迟(Delay) ...

  10. 与IO相关的等待事件troubleshooting-系列9

    Buffer Cache与IO相关的等待事件: 这种等待事件的产生原因是包含DBWR进程和IO Slaves的Buffer Cache操作. 'db file parallel write' , 'd ...