Will p respond to margin? Options

[Mhatfield]

It worked as you said it would, but I want some margin between 'Status' and the photo.

Here

I tried using margin-left: 10px;

it availeth none.

[Frederiek]

That's because an image is an inline element, while a P is a block-level element. Inspect both elements, you'll see how they render.

You could add a margin-right to the image instead.

[Mhatfield]

i suspected it was something among those lines…lol

All this block level, inline, stuff = confusing lol

[Mhatfield]

Ok thanks it worked!

[pandy]

Actually it is because the image is floated. Floats push the content of adjacent boxes away, but not the box itself. The P stretches behind the floated image all the way to the left edge of the page. For a left margin to have a visible effect it must be wider than the image.

[Mhatfield]

Ok thanks so much! Learn something everyday

[pandy]

Ha ha! Now I'm banned from your site! Or blacklisted anyway.

Anyhow, put something like this on the P and you can see how it works, how the P streches and that if that you add a small left margin it only affects how far to the left the P box stretches.

CODE

<p style="border: 10px solid red; margin-top: -5px"><u><b>Status:</b></u>Currently working on my website (this site). Playing basketball and working with my horses. </p>