解決inline-block元素的3個 bug - JavaShuo

在使用inline-block時，有時候出現的效果莫名奇妙，例如：html

兩個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.去掉空格spa

<!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 設置爲 14pxcode

<!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-righthtm

<!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（該屬性增長或減小字符間的空白（字符間距））utf-8

<!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 （該屬性增長或減小單詞間的空白（即字間隔））ci

<!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-alignit

<!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-alignclass

<!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>