CODEWITHSUNDEEP
htmlcss
DemCodeLines
DemCodeLines

Reputation: 1920

Margin top issues

<img src="/test.png" style="margin-top:20px;margin-left:20px" title="Hello" border="1" height="100" width="110" />
<span style="text-shadow: 1px 1px 17px #347235;margin-left:20px;margin-top:-20px">Test span</span>

What happens is that the image is displayed but the "Test span" message is printed on the right side of the image according to the margin-left:20px but the the margin-top doesn't do anything as the label shows towards the bottom of the image. I want it to show on the top like the image comes up but the label is showing at the bottom.

You can see it right here: http://jsfiddle.net/AMWjH/

Please help

Upvotes: 2

Views: 17652

Answers (4)

Jesse Atkinson
Jesse Atkinson

Reputation: 11406

Why are you structuring your code this particular way? Without fully knowing your limitations I'd strongly recommend doing something like this: (of course, take the inline styles out and put them in a stylesheet).

<div style="height: 140px; width: 150px;">  
    <p style="text-shadow: 1px 1px 17px #347235; text-align: center;">Test span</p>  
    <img src="http://ressim.net/upload/dce92a76.png" style="padding:0 20px 20px;" title="Hello" border="1" />
</div>

Let me know if this solves it for you. There is no reason to use margins & negative margins. In this particular case margin or padding would work on the image, though. As a rule, avoid negative margins if possible and only use them when absolutely necessary.

I hope this helps.

Upvotes: 0

user1080806
user1080806

Reputation:

I'm not certain what you're asking for, but it sounds like you want the title to go to the right of the image, but aligned to the top. Am I understanding the question? Try this:

HTML:

<div class="titledImage">
    <img src="/test.png" title="Hello" width="110" height="100" />
    <p>The Title</p>
</div>

CSS:

.titledImage img {
    float: left;
}

Upvotes: 1

sooper
sooper

Reputation: 6039

From what I gather, you want to wrap the text around the image. You just need to add an align attribute to you <img> tag:

<div style="padding: 20px;">
<img src="/test.png" style="margin-left:20px; margin-right: 20px;" title="Hello" border="1" height="100" width="110" align="left" />
<span style="text-shadow: 1px 1px 17px #347235;">Test span</span>
</div>

Upvotes: 0

Wex
Wex

Reputation: 15695

You can change the vertical-align property to change how the elements display. I think that applying vertical-align: top to the image solves your problem:

Preview: http://jsfiddle.net/Wexcode/AMWjH/23/

Also, the reason why the margin-top and margin-bottom aren't affecting your span element is because span is an inline element. You can change it to inline-block or block to apply this margin (changing it to block will override vertical-align).

Upvotes: 2

Related Questions