Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Change margin-top at <a href>

Posted on 2006-10-26
7
Medium Priority
?
2,367 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Hire Technology Freelancers with Gigs

Work with 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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

688 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