Solved

Change margin-top at <a href>

Posted on 2006-10-26
7
2,249 Views
Last Modified: 2008-02-01
Hello, If I set margin-top 30px; of the following image link by CSS. What do I need to??

<a href="b.html"><img src="a.jpg" border="1" width="300" height="100"></a>



0
Comment
Question by:portal123
7 Comments
 
LVL 10

Expert Comment

by:rivusglobal
ID: 17815278
Hi portal123,

Do you mean how can you specify CSS styles inline?  Use the style="" attribute.

<a href="b.html" style="margin-top: 30px"><img src="a.jpg" border="1" width="300" height="100"></a>
0
 

Author Comment

by:portal123
ID: 17815517
I'd like to keep top margin space 30px for href link

I put attribute margin-top:30px; in href tag with style. But, margin-top space could not be chnaged. I'd like to know how to make margin-top at <a href><img src="" border=""></a>

I made  like <a href="b.html" style="margin-top:30px; margin-left:50px;"><img src="a.jpg" border="1" width="300" height="100"></a>.

margin-left works, but margin-top does not work. I would like to know how to do this.
0
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 400 total points
ID: 17816054
http://www.w3.org/TR/CSS21/box.html#margin-properties
Quote:  <<These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.>>

Links are non-replaced inline elements.
Images are replaced elements, so you can set the margin on your image instead.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Assisted Solution

by:justdriveon
justdriveon earned 100 total points
ID: 17820381
You can also make your link a block element using style="display: block".  Then you can use the margin-top attribute.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17820454
> You can also make your link a block element using style="display: block".
But this has side effects.
0
 

Author Comment

by:portal123
ID: 17821711
Thanks. I have one more question. If  lining up two elements horizontally like <a href="a.html"><img src="a.jpg"></a>&nbsp;<a href="b.html"><img src="b.jpg"></a>, How can I set up CSS attribute?
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17822468
What do you mean exactly?
First you should not use &nbsp; and use CSS instead.
And don't forget to supply an alt value for the images.
Example:

<span class="MyClass">
  <a href="a.html"><img src="a.jpg" alt="a"></a>
  <a href="b.html"><img src="b.jpg" alt="b"></a>
<span>

Then you define your styles in an external css file:

span.MyClass {
  white-space: nowrap;
}
span.MyClass img {
  margin-top: 50px;
  border: 1px solid red;
}
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question