1
2
3
4
div{width:900px;}
div li{ display:inline-block; width:300px;}
<ul>
    <li></li>
1
<li></li>
1
<li></li>
1
</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-boock的默认间距的更多相关文章

  1. 如何去除掉inline-block元素之间的默认间距

    前几天写一个页面 div{width:900px;} div li{ display:inline-block; width:300px;} <ul> <li></li& ...

  2. inline-block默认间距

    inline-block元素默认会有间距   解决方法之移除空格 元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了.考虑到代码可读性,显然连成一行的写法是不可 ...

  3. Android 部分机型GridView四周默认间距

    在测试兼容性时候,部分机型,比如联想和一加等手机,在使用Gridview的时候,会默认四周有默认边距,10dp左右. 这时候需要设置 android:listSelector="@andro ...

  4. 如何去除inline-block的默认间距

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  5. 去掉inline-block元素默认间距的几种方法

    方法1:使用负margin值一般是-3px,部分浏览器可能不同,不太推荐使用. 方法2:去掉多余空格将元素紧挨着写去掉多余空格,但降低了可读性. 方法3:使用font-size:0在外层父元素加上fo ...

  6. JD . 圆角矩形、权重层级、浮动撑开盒子及元素的默认间距、清除浮动、隐藏盒子、盒子的撑开与撑破、子盒子垂直居中|不占位置

    ---恢复内容开始--- 圆角矩形 border-radius:50%  40%  30%  33px:   像素.百分比.小数( 0.5 ) 左上.右上.右下.左下 权重: 标签 1 : 类选择器 ...

  7. 关于css中列表(ul ol)存在默认间距的问题

    一.总结: 有时候我们要给列表(ul ol 本身就是属于块级元素)的上表框或下边框设置颜色,如下: 但是在给内联块级元素(inline-block)的上表框或下边框设置颜色的时候,就没有这么简单: 在 ...

  8. 清除inline-block元素默认间距

    1. font-size:0; 2.letter-spaceing:-0.5em;

  9. inline-block默认间距解决方法

    方法一: 父元素设置font-size: 0;  行内块元素有文字时再在该元素上设置font-size 方法二: 父元素设置word-spacing为负 方法三: Inline-block   元素浮 ...

随机推荐

  1. 构造函数this和base的区别

    构造函数this和base的区别: this:调用的是本身,不能调用父类和子类的 base:调用父类的,不能调用本身的,但别人继承,可以调用 从中也可以得出另外个结果构造函数的运行过程 先从基类开始构 ...

  2. python 调用封装好的模块

    有些时候,我们写了些通用的模块,想调用的时候,该怎么操作呢? 以下是我写的一个简单的登录作为例子: 在cla.py中定义了一个Login_gues.pyt(带参数的实例):在cc.py下调用这个; 1 ...

  3. 比较常用到的一些linux命令行

    find ./ -type f -name "*.c" | xargs grep -l "tm_common_ctrl_init_chip_init"     ...

  4. C#中调用user32.dll库的keybd_Event函数,操作键盘

    keybd_event()的函数原型是: void keybd_event( byte bVk,          //虚拟键码 byte bScan,       //该键的硬件扫描码 dword ...

  5. PostgreSQL 磁盘使用大小监控

    表大小信息 postgres=# SELECT *, pg_size_pretty(total_bytes) AS totalpostgres-# , pg_size_pretty(index_byt ...

  6. C++之路进阶——codevs1789(最大获利)

    1789 最大获利 2006年NOI全国竞赛  时间限制: 2 s  空间限制: 128000 KB  题目等级 : 大师 Master       题目描述 Description 新的技术正冲击着 ...

  7. HTML5的postMessage使用记要////////////////////////////zzzzzzzz

    2014-11-09 20:17:27http://jo2.org/html5-js-postmessage-tips/--点击数:2710     HTML5提出了一个新的用来跨域传值的方法,即po ...

  8. c#-SimHash匹配相似-算法

    使用场景:Google 的 simhash 算法 //通过大量测试,simhash用于比较大文本,比如500字以上效果都还蛮好,距离小于3的基本都是相似,误判率也比较低. //从我的经验,如果我们假定 ...

  9. 【原创】我所理解的自动更新-APP发布与后台发布

    发布后台 创建渠道:添加新的渠道,设置渠道名称,自动生成渠道id.    查看渠道:查看渠道基本信息,渠道app版本号,资源版本号,是否开启更新.    创建/更新APP:选择打包ios,androi ...

  10. CEGUI0.8.4引入到自己工程中

    首先要确定你的CEGUI已经完全编译好,若未进行这一步请参照http://www.cnblogs.com/wenguang1996/p/5027522.html 打开VS2012新建C++工程,然后添 ...