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. BJOI2015 Day1

    本以为会是三道小强与阿米巴,结果打开题目一看发现了这个: T1: 恩先写着一道 #include<cstdio> #include<cstring> #include<c ...

  2. JS中检测数据类型的四种方式及每个方式的优缺点

    //1.typeof 用来检测数据类型的运算符 //->typeof value //->返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number". ...

  3. 模板引擎freemarker的简单使用教程

    freemarker十分强大,而且不依赖web容器,个人感觉十分好用. 下面直接进主题,freemarker还有什么特性,请找度娘或谷哥~ 一.freemarker生成word 1.创建模板. 我创建 ...

  4. myeclipse10 .jsp将表单提交给.java（form网页与后台通信初识）

    做毕设需要用到form通信. 以下几张截图来自极课学院 servlet jsp文件 web配置 出现错误: 路径问题 仍然不对,需要再改 <form action="servlet/S ...

  5. IE6 BUG 汇总

    1.IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方 ...

  6. 序列化各个类型成JSON XML实例

    LitJson组件序列化请参考http://www.cnblogs.com/leee/p/4437230.html XML序列化请参考http://www.cnblogs.com/leee/p/424 ...

  7. HRBUST 1326 循环找父节点神术

    题意 给出一个图 给出a点到每个点的路径 最后经过的除这个点本身以外的点 现在把a点改为b点 让求出按上面那种方式 把除b之外的点对应的点列出 ...算了我描述题意得能力好差...这个锅还是给出题的吧 ...

  8. Ubuntu 安装搜狗拼音及fcitx

    首先卸载原有ibus输入源: sudo apt-get remove ibus System Settings -> Software & Updates -> Other Sof ...

  9. Web 在线文件管理器学习笔记与总结（7）重命名文件

    rename($oldname,$newname) 重命名文件或目录 <<<EOF EOF; 使用heredoc 技术,来部分实现界面与代码的准分离 重命名时,需要验证新文件名的合法 ...

  10. SVN客户端常用命令

    1. 将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例如: cd /home/www  #进入准备获取的项目路径 svn checkout svn: ...