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. 【Vijos】1792 摆花

    题目链接:https://vijos.org/p/1792 算法:DP 看到这题真的一点不会...只能爆搜一下..但太太慢了..看了题解后,听说是分组背包??不知道.. 好吧,,还是百度了下题解,渐渐 ...

  2. COJ 删除数字

    试题描述 输入正整数N和M,在N中删除掉M位,能留下的最大整数是多少? 输入 正整数N和M 输出 留下的最大整数 输入示例 233390323 5 输出示例 9323 其他说明 1<=N< ...

  3. winform学习之----打开文件对话框并将文件内容放入文本框

    OpenFileDialog ofg = new OpenFileDialog(); ofg.Title = "ddd";//设置对话框标题 ofg.Multiselect = t ...

  4. Mock模拟后台数据接口--再也不用等后端的API啦

    ok,在开发中经常需要从后台获取数据,那么有时候后台的数据接口并没有写好,所以这时候,就需要自己模拟数据接口,来实现前端逻辑, 今天数的就是阿里巴巴的一款mock产品,很好用的哦!!!! ok!这是我 ...

  5. VTKMY 3.3 VS 2010 Configuration 配置

    Download VTKMY 3.3 Download VS2010 Download CMake 3.2.0 I assume you've already installed VS2010 and ...

  6. ArcEngine开发 尝试读取或写入受保护的内存。这通常指示其他内存已损坏。

    if(pFeature!=null) { IPoint pnt = pFeature.Shape as IPoint; pntArray.Add(pnt); } 调试是pntArray.Add(pnt ...

  7. Html - 图片

    千图网 http://www.58pic.com/ 图标宝 http://ico.58pic.com/ 瓢城Web俱乐部 http://www.ycku.com/demo/

  8. 3种用组策略将域帐号加入本地管理员组的方法_jinifly_新浪博客

    次当前系统域帐号是怎么在第一次登录时,自动加入域客户端本地管理员组的?我猜不外乎就是脚本.计算机策略或虚拟机初始化的自动应答脚本,结果系统的前任同事找到了答案--GPO的用户策略(确切讲是用户首选项) ...

  9. JavaScript系列：event.bubbles属性（并不是所有的事件都具有冒泡）

    地址 https://www.w3.org/TR/DOM-Level-3-Events/#h3_interface-Event https://segmentfault.com/q/101000000 ...

  10. windows2003下安装apache

    php建议在http://www.apachelounge.com/ 下载apache的二进制版本,因为提供了不同VC版本.不懂,照做. 因为是在虚拟机2003上面搞的,需要装VC2010版本. 下载 ...