码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-02-26 01:28:18      阅读:58      评论:0      收藏:0      [点我收藏+]

标签:word   pst   元素   强制   style   width   换行符   letter   size   

(百科:

在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;
          width: 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>

 

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

标签:word   pst   元素   强制   style   width   换行符   letter   size   

原文地址:https://www.cnblogs.com/1998Archer/p/12364755.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!