zoukankan      html  css  js  c++  java
  • CSS font-size: 0去除内联元素空白间隙

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

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

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

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

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

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

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

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

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

     

     

  • 相关阅读:
    day10 Java学习(开发工具.Eclipse)
    day9 Java学习(面向对象Package关键字)
    day8 Java学习(面向对象.多态&接口)
    day7 Java学习(面向对象.继承)
    day5 Java学习(面向对象)
    day4 Java学习(数组)
    day3 Java学习(循环结构)
    day2 Java学习(位运算符)
    2019-05-26 java学习日记
    2019-05-25 java学习日记
  • 原文地址:https://www.cnblogs.com/yaokai729/p/11219074.html
Copyright © 2011-2022 走看看