文本太靠近 iframe - 如何在它周围获得边距/边框？

Question

我试图让 Lorem Ipsum 的段落在它和 spotify iframe 插入之间有大约 30px 的边距。我尝试了很多东西，并进行了搜索，但似乎无法让它像我想要的那样工作。 这是我的codepen的链接。 http://codepen.io/ChrisPetrick/pen/gpzRzY

.nickDrakeHorn {
  border: 1px solid black;
  overflow: hidden;
  height: auto;
  width: 100%;
  background-color: #FF99CC;
}
#iframe {
  margin-right: 30px;
  margin-top: 30px;
  margin-left: 20px;
}

#trackInfo1 {
  float: left;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 1px;
  margin-bottom: 1px;
  font-size: 20px;
  width: 65%;
}
#commentary1 {
  font-size: 20px;
  width: 95%;
  padding-left: 30px;
}

 <div class="box nickDrakeHorn">
   <div id="iframe">
     <iframe src="https://embed.spotify.com/?uri=spotify%3Atrack%3A4XFZey4zmgQV551M0hfaUg" width="300" height="380" align="left" border-right="30px"></iframe>
   </div>
       <div id="trackInfo1">
            <hr />
            <p><strong>Track: <q>Horn</q></strong></p>
            <p><strong>Artist: Nick Drake </strong></p>
            <p><strong>Original Album: Pink Moon </strong></p>
            <p><strong>Year: 1972 </strong></p>
            <hr />
       </div>

       <div id="commentary1">
            Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.
            Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, Blah Blah Blah dolor sit amet nulla ham qui sint exercitation
            eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod
            commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.  Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod
            commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod
            commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo,
            chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.
            Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.
            Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit,
            dolore aliqua non est magna in labore pig pork biltong.  Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit,
            dolore aliqua non est magna in labore pig pork biltong.
       </div>
 </div>

Answer 1

我已经用我的解决方案 fork 你的 CodePen，以防你想摆弄它。

http://codepen.io/dharshba/pen/YXLQBb

.nickDrakeHorn {
  border: 1px solid black;
  overflow: hidden;
  height: auto;
  width: 100%;
  background-color: #FF99CC;
  padding:20px;  
}

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

#trackInfo1 {
  margin-top: 1px;
  margin-bottom: 1px;
  font-size: 20px;
  width:100%;
}

#commentary1 {
  font-size: 20px;
}

有些问题来自像素和百分比的尴尬混合。由于您的 iframe 宽度以像素为单位，因此您无法确定 #trackInfo1 上 65% 的宽度会在哪里结束。但是，通过从该 div 中删除 float:left，它现在占据了 Spotify iframe 之后 剩余内容 的 100%，而不是在 iframe 占用超过 35% 的空间时下降，以获得更可预测的结果。

iframe 上 20 像素的下边距是由于段落中的行结束而恰好看起来正确的结果。如果您更改字体大小或行高，则可能需要进行调整。

我还认为你有一些额外的混乱，试图用自己的边距和填充使单个元素远离边界。在外部 div (.nickDrakeHorn) 上放置填充是一种更简单的方法，可以防止内部的所有内容过于靠近边缘。

最后，包裹 iframe 的 div 似乎没有多大作用，所以我把它从 HTML 中取出，直接将样式应用到 iframe 标签上。

Answer 2

改变这个：

#iframe {
  margin-right: 30px;
  margin-top: 30px;
  margin-left: 20px;
}

到这里：

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

iframe 是一个元素，因此如果您的 iframe 具有这样的 id 和 id，您现在可以通过 iframe 调用它：

<iframe src="https://embed.spotify.com/" id="iframe"></iframe>

然后#iframe css 调用将起作用。