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. Redis错误配置详解

    在使用Redis做缓存时,应用往往能得到非常高的性能.然而,如果配置不当,你将遇到很多令人头疼的问题,比如复制缓冲区限制.复制超时等. Redis提供了许多提高和维护高效内存数据库使用的工具.在无需额 ...

  2. 让input不可编辑的方法

    两种方法: disabled="true " 文字会变成灰色,不可编辑. readOnly="true" 文字不会变色,也是不可编辑的 <input na ...

  3. hdu 3348 coins

    这道题算是一道很经典的题,很好的诠释了贪心和动态规划的不同功能.求最少钱的数量用贪心就够了,但是求最多钱的数量要用到动态规划的思想,每步都尽量保留最大 数量.具体看程序注解: #include&quo ...

  4. 【新产品发布】【iCore2 ARM / FPGA 双核心板】

    iCore2是一款包含ARM / FPGA两大利器的双核心板.ARM方面,采用意法半导体高性能的32位Cortex-M3内核STM32F103VE微处理器,主频达72MHz,并包含丰富外设接口.FPG ...

  5. JavaScript操作DOM对象

    js的精华即是操作DOM对象 [1]先看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  6. 优雅的函数式编程--Clojure概述

    欢迎转载,转载请注明出处,徽沪一郎. 楔子 由于阅读storm源码的原因,头一次接触到Clojure.没有花特别的时间来研究clojure语法,只是在一些特殊的用法时,才查了一下clojure官网的文 ...

  7. jQuery Ajax 确定 form 表单 submit 提交成功

    使用 jQuery 提交表单,可以使用 同步方式(async: false). a.html 是 html 文件,a.php 是服务端文件,把 a.html 中表单的数据提交到 a.php 中,在提交 ...

  8. IE6 — 你若安好，便是晴天霹雳 [ 乱弹 ]

    为什么还有人在用IE6?估计和中国的盗版业有很大关系吧.小白的电脑启不来了,请人重装系统,一张古老的Ghost搞定,IE6便落地生根.今天碰到一例报告说某网站在IE6下丑陋吓人,无心无力去解决,于是来 ...

  9. Find命令搜索过去一段时间内修改过的文件

    Find命令搜索过去一段时间内修改过的文件 服务器  kxjhwbb  12个月前 (10-22)  342℃  0评论 有些时候我们需要查找一些最近修改过的文件,比如改着改着忘了自己改过什么= = ...

  10. PHP调用java的class

    PHP调用java的class   转:http://hi.baidu.com/lei0827/blog/item/28439a4e923234ced1c86a18.html PHP调用java的cl ...