inline-block元素的空白间距

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>无标题文档</title>

<style type="text/css">

 .outer{

     height:40px;

     width:260px;

     border:1px solid green;

 }

 ul{

     list-style:none;

     margin:0;

     padding:0;

     border:1px solid red;

     padding:10px;

 }

 ul li{

     border:1px solid green;

     width:300px;

     display:inline-block;

 }

</style>

</head>

<body>

   <div class="outer">

     <a href="#" title="行内元素">行内元素</a>

     <a href="#" title="行内元素">行内元素</a>

     <a href="#" title="行内元素">行内元素</a>

   </div>

   <ul>

     <li>用display:inline-block取代float布局</li>

     <li>用display:inline-block取代float布局</li>

      <li>用display:inline-block取代float布局</li>

   </ul>

</body>

</html>

效果:

这种空白在要求不是特别严格的时候，其实无伤大雅，但又的时候我们就需要清除这些空白

清除的方法也是多种多样，我这里举出几个常用呀；

元素之间出现空白的原因是标签端之间的空白，各种方法去掉

方法一：改变html的布局方式

方式二：margin-right：-负值

方式三：外层容器font-size=0；有文字的容器，我们单独的设置font-size：想要的值

考虑到兼容性（chrome）；-webkit-text-size：none；（Safari下可问题依然存在）

还有方式n...........

最终查阅多方资料和实践，最兼容的写法：

 .finally-solve{

     letter-spacing:-4px;/*根据不同的字体字号或许要做一定的调整*/

     word-spacing:-4px;

     font-size:;

 }

 finally-solve ele{

     font-size:16px;

     letter-spacing:normal;

     word-spacing:normal;

     display:inline-block;

     *display:inline;

      zoom:;

 }

ps：

letter-spacing:10px;/*它改变的每个字母之间的间距不是单词之间的间距*/

word-spacing:30px; /*它改变的是每个单词之间的间距，仅仅限于英

inline-block元素的空白间距的更多相关文章

  1. inline-block元素的空白间距解决方法<转>

    使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果.有关于使用inline-block来代替float的讨论也蛮多的. 不过就是使用inline ...

  2. 如何解决inline-block元素的空白间距 css 完美解决

    转载W3CPLUS,链接地址:http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements 有关于使用inli ...

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

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

  4. 如何解决inline-block元素的空白间距

    早上在博客中有人提了这样一个问题:“li元素inline-block横向排列,出现了未知间隙”,我相信大家在写页面的时候都遇到过这样的情况吧. 我一般遇到这情况都会把li浮动起来,这样就没有间隙.但是 ...

  5. 使用CSS如何解决inline-block元素的空白间距

    早上在博客中有人提了这样一个问题:“li元素inline-block横向排列,出现了未知间隙”,我相信大家在写页面的时候都遇到过这样的情况吧. 我一般遇到这情况都会把li浮动起来,这样就没有间隙.但是 ...

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

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

  7. inline-block元素的空白间距解决方法

    方法1 <ul><li>item1</li><li>item2</li><li>item3</li><li&g ...

  8. inline-block及解决空白间距

    參考:http://www.jb51.net/css/76707.html http://www.webhek.com/remove-whitespace-inline-block/ inline-b ...

  9. inline元素和inline-block元素的4px空白间距解决方案

    实在不想写了,要吐了,看到一篇讲的比较全的文章,直接粘链接了 inline元素和inline-block元素的4px空白间距解决方案 出自脚本之家

随机推荐

  1. Struts2_ValueStack,OGNL详解

    一.ValueStack    1.ValueStack是一个接口,在struts2中使用OGNL(Object-Graph Navigation Language)表达式实际上是使用实现了Value ...

  2. ThinkPHP几个配置文件的位置

    1.常用的ThinkPHP\Conf\convention.php 2.ThinkPHP/Lib/Behavior/ParseTemplateBehavior.class.php模板引擎相关配置

  3. Powershell的远程管理

    powershell有强大的远程管理功能,但是现在遇到个问题,我们之前的客户端操作系统都是默认安装的,没做默认设置,请问如何通过gpo将所有和远程有关的设置都搞定啊?到底要设置哪些个选项?   我的环 ...

  4. Hadoop及子项目备注

    Hadoop CommonHadoop体系最底层的一个模块,为Hadoop各子项目提供各种工具,如:配置文件和日志操作等. AvroAvro是doug cutting主持的RPC项目,有点类似Goog ...

  5. ScrollFix.js：一个 iOS5 溢出滚动的（有限）修复方案

    Update: Unfortunately this does not 100% solve the problem, the script falls down when handling touc ...

  6. js判断时间差

    //var startDate = "2015-09-09"; //var endDate = "2015-09-08"; var startDate = &q ...

  7. Linux下查找包含BOM头的文件和清除BOM头命令 2014-08-16 12:30:50

    Linux下查找包含BOM头的文件和清除BOM头命令 2014-08-16 12:30:50 分类: 系统运维 查找包含BOM头的文件,命令如下: 点击(此处)折叠或打开 grep -r -I -l ...

  8. HTML: Css初始化

    相同的元素, 如ul>li,body等元素在不同的瀏覽器下被渲染的效果不同(各個瀏覽器對這些元素的border,margin,padding,font-size等等的初始值不同), 要讓他們表現 ...

  9. ViewData ViewBag TempData

    ViewData(一个字典集合类型):传入的key必须是string类型,可以保存任意对象信息,特点:它只会存在这次的HTTP的要求中而已,并不像session可以将数据带到下一个Http要求.   ...

  10. Linux下监控磁盘使用量并在超过阀值后自动发送报警邮件

    最近Linux服务器磁盘使用量经常到100%,直到影响到正常服务出现故障才会去注意,做不到防患于未然,今天在网上搜集了资料,加上自己修改,写了一个shell脚本用于实时监控磁盘使用量并在超过阀值后自动 ...