zoukankan      html  css  js  c++  java
  • 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>
    一日之计在于晨
  • 相关阅读:
    代码4
    readline,readlines,read函数
    代码3
    find函数
    字典的循环和if语句
    代码2
    代码1
    python除法
    字符串
    print函数
  • 原文地址:https://www.cnblogs.com/1998Archer/p/12364755.html
Copyright © 2011-2022 走看看