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: ...