保证金在CSS中不起作用

Question

I've been looking for solutions everywhere but I can't understand how to separate the text from the iframe. Everything I tried did not work (for example, this answer). This is a screenshot to have an idea:

this is the HTML (I used it very rarely in my life and never worked with containers before, so I'm sure the error is clearly visible to someone more skilled than me):

<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>

This is the CSS (I was testing margin-left: 10px but 10 or 1000px won't change anything):

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

I think you could solve it by setting position: relative; to your article tag. This way, you could then specify the position offset that you want it to have using the left property instead of using the margin-left property.

I mean:

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;
}

If this is not exactly what you wanted, I also think that the position property, together with the left , right , top and bottom properties, seem quite suitable for your problem, so I suggest you should take a look of them.

Answer 2

HTML5不支持iframe样式，因此无法通过样式表进行设置。