html - 边距在 CSS 中不起作用

Question

我一直在到处寻找解决方案，但我不明白如何将文本与 iframe 分开。我尝试的所有方法都不起作用(例如，this 答案)。 这是一个想法的屏幕截图:

这是 HTML(我一生中很少使用它，之前从未使用过容器，所以我确信这个错误对于比我更熟练的人来说是清楚可见的):

<div class="container">
  <iframe src="link" width="500px" height="500px" align="left" style="border: 1px solid #ccc" frameborder=0></iframe>
  <article>
    <font face="calibri" size="30" style="background-color: powderblue;">title</font>
    <h4></h4>
    <font face="verdana">text</font>
  </article>
</div>

这是 CSS(我正在测试 margin-left: 10px 但 10 或 1000px 不会改变任何东西):

article {
    margin-left: 10px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}

body {
    max-width: 100%;
}

div.container {
    width: 100%;
    border: 1px solid gray;
}

iframe {
    float: left;
    margin-right: 30px;
    margin-bottom: 20px;
    margin-left: 20px;
}

Answer 1

我认为您可以通过将 position: relative; 设置为您的文章标签来解决它。这样，您就可以使用 left 属性而不是使用 margin-left 属性来指定您希望它具有的位置偏移量。

我的意思是:

article {
    position: relative;
    left: 10px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}

body {
    max-width: 100%;
}

div.container {
    width: 100%;
    border: 1px solid gray;
}

iframe {
    float: left;
    margin-right: 30px;
    margin-bottom: 20px;
    margin-left: 20px;
}

如果这不是您想要的，我还认为 position 属性以及 left、right、top 和 bottom 属性，似乎很适合你的问题，所以我建议你应该看看它们。