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>
    一日之计在于晨
  • 相关阅读:
    poj 1743 Musical Theme 后缀数组
    poj 1743 Musical Theme 后缀数组
    cf 432D Prefixes and Suffixes kmp
    cf 432D Prefixes and Suffixes kmp
    hdu Data Structure? 线段树
    关于position和anchorPoint之间的关系
    ios POST 信息
    CALayers的代码示例
    CALayers详解
    ios中得sqlite使用基础
  • 原文地址:https://www.cnblogs.com/1998Archer/p/12364755.html
Copyright © 2011-2022 走看看