Forum Moderators: not2easy
{ Text Heading }
[ LINKED IMAGE ]
{ paragraph }
Sounds simple enough... but I cannot figure out how I can put top padding on the linked image to seperate it from the <h3> header! The xhtml I have is as follows:
<h3>Heading Goes Here</h3>
<a href="otherpage.php"><img src="img.gif" alt="img here" /></a>
<p>Paragraph goes here...</p>
If I apply top padding to the <a> link above, it does nothing, because it's an inline element. I can apply padding to the image, but then the link still wraps that blank padded area above the image which is also not what I want.
I tried turning the <a> link into a block-level element, and that works, but then the link spans the entire parenting div's width, which is also not what I want.
I know I can float everything and set explicit widths and paddings, but I have like 20 of these types of buggers on numerous pages that need updated daily, and having to deal with varying sized elements and reseting all those properties would be a pain.
I also know I can wrap the linked image in a <div> and use that new div to set padding on the linked image... and that would work perfectly... but I am trying to avoid extranneous code as much as possible... especially considering this occurs numerous times on multiple pages.
Any ideas would be so greatly appreciated. Thank you for any help or guidance.