文字与iframe过于接近-如何获得页边距/边框? [英] text too close to iframe-how to get margin/border around it?

问题描述

我正在尝试使Lorem Ipsum的段落与Spotify iframe插入之间有大约30px的页边距.我尝试了许多事情，并进行了搜索，但似乎无法像我希望的那样使它工作.这是我的Codepen的链接. http://codepen.io/ChrisPetrick/pen/gpzRzY

I'm trying to get the paragraph of Lorem Ipsum to have about 30px of margin between it and the spotify iframe insert. I have tried many things, and searched but cannot seem to get it to work like I would like. Here's a link to my 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>

推荐答案

我已经将您的CodePen分叉了我的解决方案，以防您想弄弄它.

I've forked your CodePen with my solution in case you want to fiddle with it.

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％的空间，效果可预测得多.

Some of the problem came from an awkward mix of pixels and percentages. Since your iframe width was in pixels, you couldn't be sure where the 65% width on the #trackInfo1 would end up. But by removing the float:left from that div, it now takes up 100% of what is left after the Spotify iframe, instead of dropping down if the iframe took up more than 35% of the space, for a much more predictable result.

由于段落中各行的结尾，iframe上20px的底边距恰好看起来正确.如果您更改字体大小或行高，则可能需要进行调整.

The bottom margin of 20px on the iframe is what happened to look right as a result of where the lines in your paragraph ended up. If you change the font size or line-height, that may need to be adjusted.

我还认为，您还有些混乱，试图使各个元素的边界和边距远离边界.将填充物放在外部div (.nickDrakeHorn)上是一种更简单的方法，可以使内部的所有内容都不会太靠近边缘.

I also think that you had some extra clutter trying to keep individual elements away from the borders with their own margins and padding. Placing padding on the outer div (.nickDrakeHorn) is an easier way to keep everything on the inside from getting too close to the edges.

最后，包装iframe的div似乎并没有做很多事情，因此我将其从HTML中删除，然后将样式直接应用于iframe标记.

Finally, the div wrapping the iframe didn't seem to do much, so I took it out of the HTML and applied the styles directly to the iframe tag.

这篇关于文字与iframe过于接近-如何获得页边距/边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！