我在Hugo Academic 网站的 index.md 页面中有一个iframe 对象，我希望它处于页面的全宽且没有边距（附上屏幕截图）。我将此代码添加到 .md 文件中：
<style>
iframe {
margin-left: 0;
padding-left: 0;
}
</style>
但是，0 填充已经是 iframe 所在的位置，所以我可以将它移到右侧，但不能移到左侧。
是否可以针对特定对象/页面进行调整？
iframe 看起来像这样：
<iframe src="https://ruslankl.shinyapps.io/roc_simulation/" width=1000 height=1000" frameborder="0"></iframe>
【问题讨论】：
我做了一些研究，发现this article 有几个更好的解决方案。我最初的解决方案有效，但它使 iframe 浮动在其余内容之上，我们不希望这样。
因此，感谢上面提到的文章，我想出了以下适用于您网站的内容：
iframe {
height: 1000px; /* Set this to the height you want the iframe to have. */
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
注意height 后面的注释。您需要在 iframe 上设置一个固定的高度，以防止 iframe 的内容被截断。我首先将它设置为650px，根据我的计算，它是它加载的网站的高度，但后来我得到了一个滚动条，我假设你不希望滚动。
引用这篇文章的实际工作原理：
这里的想法是：将容器推到浏览器窗口的正中间，left: 50%;，然后以负-50vw 边距将其拉回左边缘。
最后一点，vw 单位是一个视口单位，更具体地说是视口的宽度，其中100vw 是视口宽度的 100%。
原答案如下：
我没有使用 Academic 主题对此进行测试，但在我自己的网站上（基于 Hugo 构建，但这不重要）这使得 iframe 成为页面的整个宽度，而不管内容上的任何边距或填充：
iframe {
left: 0;
position: absolute;
width: 100%;
}
使用position: absolute，iframe 将尽可能靠近窗口左侧（感谢left: 0）。然后我们使用width: 100% 让它填满页面。
您还应该考虑向 iframe 添加一个类或一个 id，以便您可以将其用于样式而不是 <iframe> 元素，以防万一您碰巧在同一页面上有多个 iframe。