• 511,display:inline-block什么时候不会显示间隙?


    (百科:

    在CSS布局中,如果我们想要将一些元素在同一行显示,其中的一种方法就是把要同行显示的元素设置display属性为inline-block,但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙,这就是“换行符/空格间隙问题”。

    display:inline;强制变成行内元素

    display:block;强制变成块元素

    而display:inline-block;顾名思义就是行内块的意思了,他具备了行内元素不换行的特征,同时也有块元素可以设置宽高的特征)

    • 移除空格
    • 使用margin负值
    • 使用font-size:0
    • letter-spacing
    • word-spacing

    eg,


    <html>
        <head>
          <title>display:inline-block元素之间空隙的产生原因和解决办法</title>
          <style type="text/css">
              .parent .child {
              display: inline-block;
              background-color: #fdfd04;
               100px;
              height: 100px;
            }
            .pst1{
                margin-left: -5px;
            }
          </style>
        </head>
        <body>
          <div class="parent">
            <div class="child">child1</div>
            <div class="child pst1">child2</div>
          </div>
        </body>
       </html>
    一日之计在于晨
  • 相关阅读:
    [Swift] Swift3.0--GCD
    [Android Pro] Swift 3.0多线程
    [MAC OS ] UserDefaults
    [MAC OS] NSOpenPanel 使用
    [ IOS ] iOS-控制器View的创建和生命周期
    [ IOS ] 视图控制对象ViewController的生命周期
    [Android Pro] AtomicInteger的用法
    [MAC OS] 常用工具
    [MAC OS] NSButton tag 获取
    [MAC OS] XCode中的Debug View Hierarchy功能
  • 原文地址:https://www.cnblogs.com/1998Archer/p/12364755.html
Copyright © 2020-2023  润新知