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. c# 使用GetOleDbSchemaTable获取access数据库结构

    c# 使用GetOleDbSchemaTable获取access数据库结构 ado.net可以使用GetOleDbSchemaTable方法来获取access数据库的结构,但得到的datatable的 ...

  2. Tomcat设置默认启动项目及Java Web工程设置默认启动页面

    Tomcat设置默认启动项目 Tomcat设置默认启动项目,顾名思义,就是让可以在浏览器的地址栏中输入ip:8080,就能访问到我们的项目.具体操作如下: 1.打开tomcat的安装根目录,找到Tom ...

  3. Linux环境下实现哲学家就餐问题

    #include <stdio.h> #include <stdlib.h> #include <memory.h> #include <pthread.h& ...

  4. 零宽度正预测先行断言是什么呢，看msdn上的官方解释定义

    最近为了对html文件进行源码处理,需要进行正则查找并替换.于是借着这个机会把正则系统地学一下,虽然以前也用过正则,但每次都是临时学一下混过关的.在学习的过程中还是遇到不少问题的,特别是零宽断言(这里 ...

  5. [转]用Linq取CheckBoxList選取項目的值

    本文转自:http://www.dotblogs.com.tw/hatelove/archive/2011/11/17/linq-checkboxlist-items-selected-values. ...

  6. ubuntu 14.04安装

    最近想搞spark.没有集群环境,想先在单机上跑.但是两年前一直用到现在的virtualbox已经太老,很多源都停更了.所以准备装ubuntu14.04. 0. 更新源.163的源有问题,用的是soh ...

  7. Redhat系列Linux的基础命令

    为网卡配置静态IP地址vi /etc/sysconfig/network-scripts/ifcfg-eth0DEVICE=eth0ONBOOT=yesBOOTPROTO=staticHWADDR=0 ...

  8. 《GK101任意波发生器》升级固件发布（版本：1.0.2build539）

    一.固件说明: 硬件版本:0,logic.3 固件版本:1.0.2.build539 编译日期:2014-10-08 ====================================== 二. ...

  9. CSS系列：表达式（Expression）`淘汰`

    概述 CSS表达式是动态设置CSS属性的强大(但危险)方法.Internet Explorer从第5个版本开始支持CSS表达式. 兼容性 expression方法在其它浏览器中不起作用,因此在跨浏览器 ...

  10. Apache Spark源码走读之3 -- Task运行期之函数调用关系分析

    欢迎转载,转载请注明出处,徽沪一郎. 概要 本篇主要阐述在TaskRunner中执行的task其业务逻辑是如何被调用到的,另外试图讲清楚运行着的task其输入的数据从哪获取,处理的结果返回到哪里,如何 ...