Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Change margin-top at <a href>

Posted on 2006-10-26
7
Medium Priority
?
2,425 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 1600 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
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!

 
LVL 2

Assisted Solution

by:justdriveon
justdriveon earned 400 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses

916 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