html - 边距左它不工作

Question

我仍然是 css 的初学者，我正在尝试为我的段落和 <h2> 留出一些边距。但它不起作用。

我有一个 700px 的 div，我想为我的 <p> 留出 10px 的 margin-left|和 <h2>与图像有关。

但是它不起作用，你能帮帮忙吗？

我在做什么:

我的 jsfiddle 问题:

http://jsfiddle.net/2p9vw/5/

我的 html:

<div id="example">
    <img src="images/image3.jpg" width="226" height="129" />
    <h2>Example</h2>
    <p>text here  text here  text here  text here  text here  text here  text here  text here  text here  text here  </p>
</div>

我的CSS:

#example {width:690px; height:auto; font-size:16px; margin:15px 0 0 0;}
#example img{float:left;}
#example h2{float:right;margin-left:10px; font-size:16px; color:#444;}
#example p{ text-align:justify; margin-left:10px; }

Answer 1

I have a div with 700px and I want to give 10px of margin-left for my <p> and <h2> in relation to the image.

But its not working

它正在工作——你只是没有看到它在工作。

由于您的图片是 float 的，这意味着任何内联内容 都会围绕它 float ——但是像 p 和 h2 这样的 block 元素仍然会超过完整宽度，在您的图像下方 – 这就是为什么您看不到该边距有任何影响的原因，因为它在图像“下方”。

只需给您的图像一个 margin-right改为 10px。 http://jsfiddle.net/2p9vw/4/