我们在编写HTML标签的时候,通常会使用换行,缩进来保证代码的可读性。同时,在编写CSS样式的时候,也会需要把一些元素设置为inlineinline-block。这样一来,有时在页面中会出现意外的空白间隙导致页面视图与本意不符。

  先来了解一下出现空白间隙的原因吧!因为内联元素默认排版中有空白间隙,以此来把每一个内联元素独立分开,这里的空白间隙也就是空白的文本节点,在缩进代码时会占据宽度,所以就导致了意外的空白间隙。

那么接下来为大家提供三种解决方法

  1.去掉两个HTML标签中的空白,也就是去掉换行,使两个标签紧紧挨在一起,去除了标签中的空白文本节点,也就去除了空白间隙。

    这种方法通常可以解决问题,但同时会使代码可读性下降,降低代码整洁度,偶尔使用影响不会太大。

  2.为元素设置letter-spacing属性letter-spacing属性允许使用负值,这会让字母之间挤得更紧。

    这种方法也可以算是一种解决方式,不过更多的还是用来设置字符的间距。

  3.为内联元素的父元素添加font-size属性,并设置为0,找到需要清除空白的内联元素,将内联元素的父元素的font-size属性设置为0就可以了,不过别忘了在内联元素中重新设置对应的font-size值。

    这个方法是最推荐的,也是最常用的方法,可以很好处理空白间隙问题。

CSS font-size: 0去除内联元素空白间隙的更多相关文章

  1. 如何去除内联元素(inline-block元素)之间的间距(转载)

    如何去除内联元素(inline-block元素)之间的间距   前几天写一个专题页 div{width:900px;}div a{ display:inline-block; width:300px; ...

  2. 【CSS】display: inline-block,内联元素

    什么是内联元素? <CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示.比如,我们设定 ...

  3. 如何去除内联元素(inline-block元素)之间的间距

    <body><a href="http://www.baidu.com">百度</a><a href="http://www.i ...

  4. css 块元素、内联元素、内联块元素

    块元素.内联元素.内联块元素: 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签 ...

  5. 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

    块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...

  6. 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素

    盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...

  7. html中内联元素和块元素的区别、用法以及联系

    昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下: <ul id="BulletedList1" s ...

  8. (转) html块级元素和内联元素区别详解

    http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...

  9. html块级元素和内联元素区别详解

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...

随机推荐

  1. Python基础(返回函数)

    #我们在函数lazy_sum中又定义了函数f1,并且,内部函数f1可以引用外部函数lazy_sum的参数和局部变量,当lazy_sum返回函数f1时,相关参数和变量都保存在返回的函数中,这种称为&qu ...

  2. React-Router示例(重定向与withRouter)

    1.withRouter作用:把不是通过路由切换过来的组件中,将react-router 的 history.location.match 三个对象传入props对象上   默认情况下必须是经过路由匹 ...

  3. Linux——搭建Samba(CIFS)服务器

    一.Samba的基本概念 Samba服务:是提供基于Linux和Windows的共享文件服务,服务端和客户端都可以是Linux或Windows操作系统.可以基于特定的用户访问,功能比NFS更强大. S ...

  4. python实现直方图的应用

    目录: (一)调节图片对比度(均衡化) (1)全局直方图均衡化------equalizeHist (2)自适应的局部的直方图均衡化------createCLAHE (二)图片的相似度比较 (三)直 ...

  5. [luogu7599]雨林跳跃

    为了方便,令$a_{0}=a_{n+1}=\infty$,另外$a_{i}$是两两不同的 记$L_{x}$和$R_{x}$分别为$x$左右两侧第一个比$a_{x}$大的元素位置,可以$o(n)$预处理 ...

  6. [hdu6578]Blank

    状态f[i][j][k][l]表示前i个数,四种数的最后一次出现的位置分别是i.j.k和l(i>j>k>l),判断所有第右端点为i的区间是否满足此要求(不满足重置为0),考虑第i+1 ...

  7. [atARC087E]Prefix-free Game

    建一棵trie树,考虑一个串,相当于限制了其子树内部+其到根的链 如果将所有点补全,那么这个问题可以看作每一个极浅(子树内没有其他满足条件)的到根路径以及子树内部没有其他结束点的子树的子问题 对于多个 ...

  8. 填坑总结:python内存泄漏排查小技巧

    摘要:最近服务遇到了内存泄漏问题,运维同学紧急呼叫解决,于是在解决问题之余也系统记录了下内存泄漏问题的常见解决思路. 本文分享自华为云社区<python内存泄漏排查小技巧>,作者:luti ...

  9. 在spring启动后执行代码

    如果spring的项目直接监听tomcat启动对于 操作来说有很大难度,bean没有初始化,接口不能直接调用等等,所以我们代码执行要在spring启动之后执行项目 package com.java71 ...

  10. 网络管理之命令行工具nmcli

    参考Ubuntu官方文档和Red Hat,本文采用Google翻译. NETWORKMANAGER 简介 介绍 NetworkManager 提供的默认联网服务是一个动态网络控制和配置守护进程,它尝试 ...