zoukankan      html  css  js  c++  java
  • 行内元素,display:inline-block元素,元素间间隙问题的解决

    当我们想让元素横向排开时,会使用span标签,或者是将块级元素设置为display:inline-block时

    有时会发现,相邻两个元素之间,明明没有设置margin或者是padding值,但是有间隙

    原因是因为html代码中相隔的span标签间有回车

    HTML代码中的回车换行被转成一个空白符,在字体不为0的情况下,空白符占据一定宽度,所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化,当行内元素font-size:16px时,间距为8px

    解决办法
    1、由于回车产生的间隙,去掉回车就好了。但是这样写在一行,代码可读性变低

    2、为父元素中设置font-size: 0,在子元素上重置正确的font-size,子元素必须重置字体。

    3、元素float:left,但是会有塌陷。

    4、设置父元素,display:table和word-spacing:normal(推荐)

  • 相关阅读:
    读书笔记第四章
    读书笔记第三章
    读书笔记第二章
    读书笔记第一章
    第十章 读书笔记
    第九章 读书笔记
    第八章读书笔记
    第七章读书笔记
    第六章读书笔记
    第五章读书笔记
  • 原文地址:https://www.cnblogs.com/sweeeper/p/13157831.html
Copyright © 2011-2022 走看看