昨天切页面时，进行布局时，想改变以下方法换换口味，所以就抛弃了float方法，采用了display:inline-block方法，没想到却随之而来的带来了一个想不通的问题，那就是空白。废话不多说，上代码。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    li{ width:50px; height:20px; background-color:#C90; display:inline-block;}

</style>

</head>

<body>

    <ul class="box">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

</body>

</html>

效果如上图所示，每个li之间都会有空格，这影响到我们对页面的布局。

一、造成的原因

inline-block水平呈现的元素之间，如果有换行或空格分隔，那么元素之间会有间距。

二、解决的方法

1、去除元素间的空白或者换行

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    li{ width:50px; height:20px; background-color:#C90; display:inline-block;}

</style>

</head>

<body>

    <ul class="box">

        <li>li</li><li>li</li><li>li</li><li>li</li>

    </ul>

</body>

</html>


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    li{ width:50px; height:20px; background-color:#C90; display:inline-block;}

</style>

</head>

<body>

    <ul class="box">

        <li>

        li</li><li>

        li</li><li>

        li</li><li>

        li</li>

    </ul>

</body>

</html>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    li{ width:50px; height:20px; background-color:#C90; display:inline-block;}

</style>

</head>

<body>

    <ul class="box">

        <li>li</li

        ><li>li</li

        ><li>li</li

        ><li>li</li>

    </ul>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    li{ width:50px; height:20px; background-color:#C90; display:inline-block;}

</style>

</head>

<body>

    <ul class="box">

        <li>li</li><!--

        --><li>li</li><!--

        --><li>li</li><!--

        --><li>li</li>

    </ul>

</body>

</html>

2、利用margin负外边距

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    li{ width:50px; height:20px; background-color:#C90; display:inline-block; margin-right:-8px;}//不过这个间距是根据字体的大小来调的，不具有普适性

</style>

</head>

<body>

    <ul class="box">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

</body>

</html>

3、因为空白字符也是字符，所以可以设置父元素的font-size：0，子元素重新定义font-size大小；但是这种方法在Safari中是无效的。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    .box{ font-size:;}

    li{ width:50px; height:20px; background-color:#C90; display:inline-block; font-size:12px;}

</style>

</head>

<body>

    <ul class="box">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

</body>

</html>

4、使用letter-spacing

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    .box{ letter-spacing:-8px;}

    li{ width:50px; height:20px; background-color:#C90; display:inline-block; letter-spacing:normal;}

</style>

</head>

<body>

    <ul class="box">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

</body>

</html>

//Opera浏览器下问题：最小间距1像素，然后，letter-spacing再小就还原了

5、使用word-spacing

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    .box{ word-spacing:-8px;}

    li{ width:50px; height:20px; background-color:#C90; display:inline-block; word-spacing:normal;}

</style>

</head>

<body>

    <ul class="box">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

</body>

</html>

影响布局的inline-block的空白符的问题的更多相关文章

  1. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  2. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  3. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  4. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  5. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  6. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  7. 土旦：关于display:flex碰上white-space nowrap 影响布局的问题

    背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影 ...

  8. div css 布局对seo 影响 布局原则

    一.代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高蜘蛛爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处 ...

  9. overflow:hidden 影响布局的问题

    a 与 b 都是 inline-block且高与父元素 c 相同均为 30px,而在a加上 overflow:hidden; 会使 a 的底线与整个父元素 c 的 text baseline 对齐,相 ...

随机推荐

  1. 怎么修改placeholder字体的css样式

    修改palceholder内文字的css样式 ::-webkit-input-placeholder{ color: red; font-size: 20px; line-height: 50px; ...

  2. EF搭建可扩展菜单

    EF实现可扩展性菜单 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !impo ...

  3. Nohttp请求图片的两种简答的方式：普通请求以及缓存请求

    开局声明:这是基于nohttp1.0.4-include-source.jar版本写的教程 由于nohttp功能强悍,因此需要多种权限,仅仅一个联网的权限是不够的,如果只给了Internet的权限,去 ...

  4. oracle行号排序问题

    1.创建一个student,并且插入数据 ),age int) '); '); '); '); '); commit; 2.直接按照age进行排序显示行号: select * from(select ...

  5. Centos6架设GIT服务，windows客户端使用TortoiseGit加载KEYGEN连接GIT服务器

    前几天得空,想起前一阵学了GIT还没好好实践,就在虚拟机中安装测试了一下,并简单记录了CENTOS6中GIT安装,ssh-keygen生成,客户端使用TortoiseGit加载KEYGEN连接GIT服 ...

  6. SAR ADC ： 逐次逼近寄存器型(SAR)模数转换器(ADC)

    1.为实现二进制搜索算法,N位寄存器首先设置在中间刻度(即:100... .00,MSB设置为1).这样,DAC输出(VDAC)被设为VREF/2,VREF是提供给ADC的基准电压.然后,比较判断VI ...

  7. 解不定方程ax+by=m的最小解

    给出方程a*x+b*y=c,其中所有数均是整数,且a,b,c是已知数,求满足那个等式的x,y值?这个方程可能有解也可能没解也可能有无穷多个解(注意:这里说的解都是整数解)? 既然如此,那我们就得找出有 ...

  8. Memcache入门知识

    Memcache适合做缓存,是一款管理内存的很小的软件,实现对内存数据的管理,一般我们用memcache存储临时数据,因为内存不能储存永久化的数据,内存里面的数据,断电就消失了. memcache可以 ...

  9. 让操作javascript对象数组像.net lamda表达式一样

    让操作javascript对象数组像.net lamda表达式一样 随着web应用程序的富客户端化.ajax的广泛使用及复杂的前端业务逻辑.对js对象数组.json数组的各种操作越来越多.越来越复杂. ...

  10. [Head First Python]6. summary

    1- 字典-内置数据结构,数据值与键值关联 键-字典中查找部分 值-字典中数据部分 使用dict()工厂函数或者只用{}可以创建一个空字典 >>> list = {} >> ...