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(推荐)

  • 相关阅读:
    Asp.net调用百度搜索引擎
    iOS 之 alcatraz (插件管理器)
    @dynamic、@synthesize
    iOS 准备
    iOS 沙盒
    iOS 引导页
    iOS 开发之登陆
    iOS 程序开发
    Java 验证用户名、密码
    数据库操作
  • 原文地址:https://www.cnblogs.com/sweeeper/p/13157831.html
Copyright © 2011-2022 走看看