zoukankan      html  css  js  c++  java
  • inline-block元素间隙产生及去除方法

    当我们把元素属性display设置成inline-block时,元素之间就会产生间隙

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{margin: 0;padding: 0;}
    ul{list-style-type: none;}
    li{
    display: inline-block;
    60px;
    height: 60px;
    line-height: 60px;
    font-size: 30px;
    text-align: center;
    color: white;
    background-color: purple;
    }
    </style>
    </head>
    <body>
    <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    </ul>
    </body>
    </html>

     效果如下:

    当我们把元素ul 下面的li放在同一行的时候你会惊奇的发现间隙消失了

    <li>A</li><li>B</li><li>C</li>

    所以我们可以认为元素的间隙是由于“回车”或者换行所导致的,但是如果我们为了消除间隙把元素都写在一行的话未免太不美观了,而且对于下一个接手你工作的人也是一个头疼的事情。所以我们采用另一种方法,font-size:0,为什么能消除呢?我们知道间隙是因为空格或者换行所产生的,而产生了一些空白字符,既然是字符当然拜托不了font的控制啦。

    ul{list-style-type: none; font-size: 0;} 对产生间隙元素的父元素

    当然方法肯定不止这几种,例如负margin,letter-spacing,word-spacing等等也是可以的

  • 相关阅读:
    HTML5 开发工具收集
    (转载)flash as滤镜效果总结
    线性表

    AS3 库资源 很多非常有用的类库
    设计模式之简单工厂
    strcpy,strncpy,strcmp,strncmp,strcat,strlen..还有啥?
    设计模式学习之前言
    转CString 用法小结
    String类的构造函数,析构函数,赋值函数
  • 原文地址:https://www.cnblogs.com/heguoze/p/9275381.html
Copyright © 2011-2022 走看看