当边距和填充为零时，为什么这些p元素之间的空格？

Question

这是一个fiddle。简化的HTML基本上就是这个

<div id="canvas">
   <p><span></span><span></span></p>
   <p><span></span><span></span></p>
</div>

使用此CSS

#canvas p
{
    margin: 0;
    border: 0;
    padding: 0;
}

#canvas p span
{
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: thin solid black;
    display: inline-block;
}

它呈现如下：

为什么行之间有空格？ DOM Inspector告诉我，跨度没有边距和填充以及p标记。

Answer 1

将from flask import Flask from flask.ext.mail import Mail from flask_debugtoolbar import DebugToolbarExtension app = Flask(__name__, static_url_path='') toolbar = DebugToolbarExtension(app) 添加到vertical-align: top。默认值为span

Fiddle

baseline

#canvas p {
  margin: 0;
  border: 0;
  padding: 0;
}
#canvas p span {
  width: 50px;
  height: 50px;
  cursor: pointer;
  border: thin solid black;
  display: inline-block;
  vertical-align: top;
}