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

Question

我试图让 Lorem Ipsum 的段落在它和 spotify iframe 插入之间有大约 30px 的边距。我已经尝试了很多东西，并进行了搜索，但似乎无法让它像我想要的那样工作。这是我的代码笔的链接。 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 标记上。