CSS中Margin失效：如何实现文本与iframe的分隔

嗨，我来帮你解决这个文本和iframe挤得太近的问题！我看了你的代码，核心问题是你给iframe同时用了align="left"属性和CSS的float: left，这俩属性会互相干扰，导致你设置的article外边距没生效。

下面给你两个靠谱的解决方案，按需选就行：

方案一：修复现有浮动布局 #

先把iframe标签里的align="left"删掉，避免和CSS的float冲突，然后调整article的外边距，确保它能避开浮动的iframe：

修改后的HTML代码：

<div class="container"> 
  <iframe src="link" width="500px" height="500px" 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代码：

article {
  /* 这里的margin-left要大于等于iframe宽度+它的右边距，确保不重叠 */
  margin-left: 550px; 
  border-left: 1px solid gray;
  padding: 1em;
  overflow: hidden;
}

body {
  max-width: 100%;
}

div.container {
  width: 100%;
  border: 1px solid gray;
  overflow: hidden; /* 清除浮动，避免容器高度塌陷 */
}

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

方案二：用现代Flex布局（更推荐） #

浮动布局是老办法，用Flex布局能更简单地控制元素间距，还不用操心浮动的各种坑：

修改后的CSS代码：

div.container {
  width: 100%;
  border: 1px solid gray;
  display: flex; /* 开启Flex布局 */
  gap: 30px; /* 直接设置iframe和article之间的间距，想调多大就调多大 */
  padding: 20px; /* 给容器加内边距，避免元素贴容器边缘 */
  box-sizing: border-box; /* 让内边距算在容器宽度里，不会撑大容器 */
}

iframe {
  flex-shrink: 0; /* 防止iframe被压缩变形 */
  border: 1px solid #ccc;
}

article {
  flex: 1; /* 让article自动占满容器剩余的空间 */
  border-left: 1px solid gray;
  padding: 1em;
}

body {
  max-width: 100%;
}

HTML可以保持原样（记得删掉iframe的align="left"），这样Flex会自动把两个元素放在一行，间距由gap控制，article也会自动填充剩余空间，完全不会和iframe挤在一起~

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