如何消除Quest Talk网站两个iframe间的桌面端冗余空白？

我运营一个名为Quest Talk的网站，页面中的Google Form与Substack Form两个iframe之间存在影响体验的冗余空白，该空白仅在桌面端浏览器可见，移动端无此问题。目前未设置针对性CSS样式，尝试过用<br>和<p>标签调整，但桌面端完全无效。

问题原因 #

iframe默认是行内块级元素，浏览器会为其保留基线对齐的间隙；同时HTML中iframe与文本之间的空白字符（换行、空格）也会被渲染成额外间距，这两种情况在桌面端更明显，移动端因布局压缩可能被忽略。

解决方案 #

• 设置iframe为块级元素：在现有CSS中添加以下样式，消除行内块元素的默认间隙：

iframe {
  display: block;
  margin: 0;
  padding: 0;
}

将iframe转为块级元素后，会默认占满父容器宽度，避免行内元素的空白间隙，同时重置margin和padding确保无额外间距。

• 清理HTML结构中的空白字符：把文本用<p>标签包裹，同时整理iframe与文本的布局，避免无意义的空白字符：

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScKB_z1KgvVb9YI8TsqxESmbC8ls1vEfvv_9oJMD6O1g6gc3Q/viewform?embedded=true" width="100%" height="790" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
<p>To stay up to date and show support, click 'Subscribe'</p>
<iframe src="https://questtalk.substack.com/embed" width="100%" style="border:0" frameborder="0" scrolling="no"></iframe>

用<p>包裹文本后，能更精准控制文本与上下iframe的间距，同时消除HTML空白字符带来的额外间隙。

• （可选）精准控制文本间距：如果需要调整文本与iframe的距离，可修改<p>标签的margin值：

p {
  margin: 0.5rem 0; /* 根据需求调整数值，缩小或增大间距 */
}

内容的提问来源于stack exchange，提问作者questtalk