如何消除inline-block属性带来的标签间间隙

1、给inline-block元素设置一个父元素。

　　设置父元素的font-size：0；。子元素font-size设置成合适大小，如果不设置子元素font-size，子元素会继承父元素的0；

2、给inline-block元素设置一个父元素。(letter-spacing：字符间距)

　设置父元素的letter-spacing为-4px或-8px，除谷歌是-8px外，其余是-4px。同样要设置子元素的letter-spacing：0；否则会

继承父元素，造成子元素内文字变形。

　　经过试验，统一设置成-8px，在视觉上没有什么差异，不知道这样做可行不可行，如果哪位有意见，随时可以说。

3、给inline-block元素设置一个父元素。(word-spacing：单词间距)

　　设置父元素的word-spacing为-4px或-8px，谷歌，360是-8px，火狐，IE是-4px。同样要设置子元素的word-spacing：0；否则会继承父元素，造成子元素内文字变形。

　　同上也可以统一设置为-8px

4、以上谷歌、火狐、360的测试均是在最新浏览器上测试，IE8测试。如有不妥还请告知。

以上内容是小编给大家介绍的inline-block属性带来的标签间间隙问题，希望对大家有所帮助！

赞 (0)

相关推荐

  • 块元素block element和内联元素inline element

    内联级元素(inline-level element)中试图插入块级(block-level element)元素.这样做是不允许的.唯一的能在内联元素中插入块级元素的例外是object标签.那么什么是内联级元素(inline-level element)和块级(block-level element)元素呢?. 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签''P"."form"这个

  • 模拟兼容性的 inline-block 属性

    而现在对于 inline-block 属性运用的需求也越来越多,可惜依旧只有 Firefox3 beta.IE8 beta.Opera.Safari 支持 inline-block 属性(注:原来只有 Opera.Safari 支持),但 IE6.IE7 可以通过触发 hasLayout 来模拟,Firefox2 有-moz-inline-box 和 -moz-inline-stack 私有属性(这两个属性的比较引用自秦歌的<display:inline-block的应用两例>). 在实际应用

  • 如何消除inline-block属性带来的标签间间隙

    1.给inline-block元素设置一个父元素. 设置父元素的font-size:0:.子元素font-size设置成合适大小,如果不设置子元素font-size,子元素会继承父元素的0: 2.给inline-block元素设置一个父元素.(letter-spacing:字符间距) 设置父元素的letter-spacing为-4px或-8px,除谷歌是-8px外,其余是-4px.同样要设置子元素的letter-spacing:0:否则会 继承父元素,造成子元素内文字变形. 经过试验,统一设置成

  • iOS通过block在两个页面间传值的方法

    一.功能需求 在第一个页面中有一个button和一个label,label上默认显示"哈哈",点击button进入第二个页面.在第二个页面有一个UITextField和一个button2,点击button2回到第一个页面,但同时第一个页面的label上显示的文字修改为刚刚在UITextField写进去的文字. 二.先定义block 在要传值得那个页面定义含有block参数的方法,即在第二个页面的.h文件中定义: 重新定义:typedef void (^ReturnTextBlock)(

  • Mybatis中实体类属性与数据列表间映射方法介绍

    Mybatis不像Hibernate中那么自动化,通过@Column注解或者直接使用实体类的属性名作为数据列名,而是需要自己指定实体类属性和 数据表中列名之间的映射关系,这一点让用惯了Hibernate的人很不习惯,所幸经过探索找到了建立映射关系的三种办法,其中总也有比较 简单的. 首先先定义一个实体类,如下: public class User implements Serializable { private Integer userId; private String userName;

  • 用正则查找html中有id属性的html标签

    如: 字符串<div style="float:left" id="ab">123213</div><div class="a123">21314423</div> 不匹配<div class="a123">--</div>的内容 写这个例子可以用 <[a-zA-Z0-9][^>]+?id=[^>]+?>.*?</div>

  • php实现三级级联下拉框

    这是我在网上查找到的php实现三级级联下拉框的资料,共享个大家,大家一起进步,具体内容如下 index.php: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Ajax联动菜单</title> <script language="javascript"

  • 实现AJAX异步调用和局部刷新的基本步骤

    目录 引言 1.创建XMLHttpRequest对象 2.创建HTTP请求 3.设置响应HTTP请求状态变化的函数 4.设置获取服务器返回数据的语句 5.发送HTTP请求 6.局部更新 7.完整的AJAX实例 总结 引言 要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法.URL及验证信息. (3)设置响应HTTP请求状态变化的函数. (4)发送HT

  • JSP自定义标签-标签属性_动力节点Java学院整理

    JSP自定义标签-标签属性_动力节点Java学院整理

    对自定义标签添加一些属性,可以使我们的标签功能更加灵活和复用.例如前一篇博客使用简单标签来对标签体内容执行一定的次数,就无法在标签上规定要执行的次数,必须在标签处理器类中修改,很不方便,如果使用带属性的标签就能很好的解决这个问题. 要想使简单标签具有属性,通常需要满足以下两个步骤: ① 在标签处理器类中定义属性,同时为每个属性生成setter方法: ② 在TLD文件中对于的<tag>标签下添加属性的<attribute>标签,同时<attribute>标签下定义其从标签

  • HTML中的图象标签属性

    HTML中的图象标签属性 图象可以使网页更加生动美观.浏览器可以显示JPEG和GIF图象,其中GIF图象最多只能使用256种颜色(即只能保存为8位颜 色),而JPEG格式可保存为24位,对具体连续色调的图象有最佳效果.不过,GIF图象虽然在图象质量上不及JPEG图象,但 其所占的存储空间下,下载速度快.因此应视不同情况而决定使用哪种格式的图象. 在HTML文档中插入图象是通过<IMG>标签来实现的.该标签共有个9个属性.除属性SRC是不可缺省的外,其他的属性都是可 选的.  一,SRC属性.S

  • JavaWeb开发之JSTL标签库的使用、 自定义EL函数、自定义标签（带属性的、带标签体的）

    JavaWeb开发之JSTL标签库的使用、 自定义EL函数、自定义标签（带属性的、带标签体的）

    JSTL  JSTL简介: JSTL的全称:JSP Standard Tag Library,JSP标准标签库 JSTL的作用: 提供给Java Web开发人员一个标准通用的标签函数库 和EL来取代传统直接在页面上嵌入Java程序(Scripting)的做法,以提高程序可读性.维护性和方便性 JSTL的版本: JSTL的主要版本是1.0.1.1和1.2(区别不大) 1.0版本EL表达式还没有纳入官方规范 1.1和1.2版本EL表达式已经纳入了官方规范 JSTL1.1 下载相应的jar包 JSTL

随机推荐