inline-block和block之间为什么有间隔?

截图中两个矩形,一个使inline-block,另一个是block,都没有设置边距。
但是两个矩形中间还是有空隙。
我尝试将两个矩形都设为block,则没有间隙。
为什么会有间隙呢?

<!DOCTYPE html>
<html lang="zh" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>print</title>
    <style type="text/css">
      * {
        margin: 0;
      }

      #canvas {
        border-style: solid;
        border-color: #5bb028;
        height: 400px;
        width: 400px;
        display: inline-block;
      }

      #print {
        border-style: solid;
        height: 400px;
        width: 400px;
      }
    </style>
  </head>
  <body>
    <div id="canvas"></div><div id="print"></div>
  </body>
</html>

图片描述

阅读 2.4k
2 个回答

inline-block让水平间隙消失就是在父级上加font-size:0;让垂直间隙消失,就在子元素上加vertical-align:bottom;

会出现间隙是由于inline box引起的,改变base-line可以去除间隔。
比如,使用vertical-align:bottom vertical-align:middle ,还可以向矩形中添加文字,这也会改变base-line的位置。

真是让人觉得恶心。

详细关于vertical-aligninline-box可以参考一下这篇博文
Vertical-Align: 关于inline,inline-block文本排版

推荐问题
宣传栏