解决inline-block元素的 bug

在使用inline-block时,有时候出现的效果莫名奇妙,例如:
* 两个inline-block 元素之间如果有空格、回车、tab,那么在页面上就有一个空隙
* 两个不同高度的 inline-block 元素顶部无法对齐,或者使用inline-block下面无缘无故多出几像素

例子1,出现空隙

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    div{
      display: inline-block;
      width:100px;
      height: 100px;
      background-color: rgb(233, 148, 148);
    }
  </style>
</head>

<body>
  <div></div>
  <div></div>
</body>

</html>

效果:

解决方法

1.去掉空格

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    div{
      display: inline-block;
      width:100px;
      height: 100px;
      background-color: rgb(233, 148, 148);
    }
  </style>
</head>

<body>
  <div></div><div></div>
</body>

</html>

2. 添加父元素,将父元素的 font-size 设置为0,然后在 inline-block 元素中将 font-size 设置为 14px

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .parent{
      font-size:0;
    }
    .child{
      font-size:14px;
      display: inline-block;
      width:100px;
      height: 100px;
      background-color: rgb(233, 148, 148);
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

</html>

3. 使用margin-right

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .child{
      display: inline-block;
      width:100px;
      height: 100px;
      background-color: rgb(233, 148, 148);
      margin-right:-5px;
    }
  </style>
</head>

<body>
  <div class="child"></div>
  <div class="child"></div>
</body>

</html>

4. 添加父元素,使用letter-spacing(该属性增加或减少字符间的空白(字符间距))

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .parent{
      letter-spacing:-5px;
    }
    .child{
      display: inline-block;
      width:100px;
      height: 100px;
      background-color: rgb(233, 148, 148);
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

</html>

5. 使用word-spacing (该属性增加或减少单词间的空白(即字间隔))

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .parent{
      word-spacing:-5px;
    }
    .child{
      display: inline-block;
      width:100px;
      height: 100px;
      background-color: rgb(233, 148, 148);
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

</html>

解决效果:

例子2,设置inline-block 后,莫名其妙出现一些空白

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>span设为inline-block之后下面的空白</title>
  <style>
    div{
      border:solid 1px rgb(202, 43, 43);
      width:250px;
    }
    span{
      display:inline-block;
      width:200px;
      height:200px;
      background-color:rgb(109, 195, 252);

    }
  </style>
</head>

<body>
  <div>
    <span></span>
  </div>
</body>

</html>

效果

解决方法

使用vertical-align

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>span设为inline-block之后下面的空白</title>
  <style>
    div{
      border:solid 1px rgb(202, 43, 43);
      width:250px;
    }
    span{
      display:inline-block;
      width:200px;
      height:200px;
      background-color:rgb(109, 195, 252);
      vertical-align:top;//新增
    }
  </style>
</head>

<body>
  <div>
    <span></span>
  </div>
</body>

</html>

解决效果

例子3,两个不同高度的 inline-block 元素顶部无法对齐

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>

    .child1{
      display: inline-block;
      width:100px;
      height: 100px;

      background-color: rgb(109, 195, 252);
    }
    .child2{
      display: inline-block;
      width:100px;
      height: 120px;
      background-color: rgb(233, 148, 148);
    }
  </style>
</head>

<body>

    <div class="child1"></div>
    <div class="child2"></div>

</body>

</html>

效果

解决方法

还是使用vertical-align

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>

    .child1{
      display: inline-block;
      width:100px;
      height: 100px;
      vertical-align:top;//新增
      background-color: rgb(109, 195, 252);
    }
    .child2{
      display: inline-block;
      width:100px;
      height: 120px;
      background-color: rgb(233, 148, 148);
    }
  </style>
</head>

<body>

    <div class="child1"></div>
    <div class="child2"></div>

</body>

</html>

解决效果

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载 https://blog.csdn.net/qq_33699981/article/details/77725771
文章标签: 前端 bug
个人分类: web前端 html css
上一篇浮动
下一篇解决 webstrom sass 注释中文出错问题
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭