如何使HTML容器和iframe嵌入其中，大小完全相同

Question

我用P5.js web editor创建了一个简单的草图，我想将其嵌入到我的网站中。 我的测试草图的画布的高度和宽度为300像素。 当我简单地将其放到网站上时，This就是草图，而当我添加一些简单的CSS时，this就是草图。这是我的代码：

#container {
  border: 2px solid blue;
  display: inline-block
}


#canvas {
  width: 300px;
  height: 300px
}

 <div id="container">
      <iframe src="https://editor.p5js.org/Kubi/embed/BkuSPoiZ4" frameBorder="0" id="canvas"></iframe>
</div>

尽管我手动将#canvas元素的大小设置为300 x 300px，但外部#container明显更大，并且高度为304 px。 为什么会这样呢？如何在不手动设置#container的大小的情况下使#container与iFrame的大小完全相同？

Answer 1

这是因为您在容器的每一侧都设置了2px的边框：border: 2px solid blue;将容器扩展了4px（左侧2px，右侧2px），因此宽度为304px。您可以将CSS更改为以下内容，以获得300x300 px的容器：

#container {
  display: inline-block;
  line-height: 0;
}

line-height删除了所有元素底部的空间，以使行之间的空间最小。