Solved

Change margin-top at <a href>

Posted on 2006-10-26
7
2,196 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

932 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now