Solved

Change margin-top at <a href>

Posted on 2006-10-26
7
2,215 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses four methods for overlaying images in a container on a web page
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 …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

808 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