前几天写一个页面

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. [zouxianghui] 清空GridPanel的checkbox选中行

    清空GridPanel的checkbox选中行,GridPanel.getSelectionModel().clearSelections();可以清空选中状态

  2. C 语言控制台实现五子棋项目

    花了一天时间实现了控制台五子棋项目,把项目贴上来.也算是告一段落了. 为了进一步了解C语言编程,熟悉优秀的编码风格,提升编码能力,丰富项目经验.所以在编程初期选择了控制台小游戏<单机五子棋> ...

  3. activemq p2p方式

    package ch02.chat; import java.io.Serializable; import javax.jms.Connection; import javax.jms.Connec ...

  4. NOIP2006 金明的预算方案

    1.             金明的预算方案 (budget.pas/c/cpp) [问题描述] 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈 ...

  5. android NDK 实用学习(五)-c++端调用java接口

    1,阅读此文章前请阅读前面文章,以免阅读出现障碍: android NDK 实用学习(一)-获取java端类及其类变量 android NDK 实用学习(二)-java端对象成员赋值和获取对象成员值 ...

  6. 大数据架构师基础:hadoop家族,Cloudera产品系列等各种技术

    大数据我们都知道hadoop,可是还会各种各样的技术进入我们的视野:Spark,Storm,impala,让我们都反映不过来.为了能够更好的架构大数据项目,这里整理一下,供技术人员,项目经理,架构师选 ...

  7. 使用SVN服务器管理源码

    最近在学习使用SVN管理自己的项目文件,正好有好的文章就拿来标记一下,正所谓: 站在巨人的肩膀上   天下知识为我所用 转载两篇关于使用SVN管理源码的文章. 使用SVN进行源码管理(上):http: ...

  8. 使用Genymotion作Android开发模拟器:安装Genymotion、部署Genymotion Vitrue Device、安装Genymotion eclipse插件

    偶然听说Genymotion Android模拟器非常强大,到网上了解一番后,决定从AVD又慢又卡中解脱出来,折腾了半天终于部署好了,体验了一下,果然启动快,运行流畅,现在总结一下经验教训,供大家参考 ...

  9. C#中使用DLL文件

    首先,我们需要在C++程序中导出DLL文件.我使用的是Visual Studio开发,把项目"属性"中的“配置类型”改为"动态库dll",然后添加如下导出代码: ...

  10. Android实例-MotionSensor加速度(XE8+小米2)

    结果: 1. 实例代码: unit Unit1; interface uses System.SysUtils, System.Types, System.UITypes, System.Classe ...