Css image link padding

CSS prevent a link tag from adding extra padding below an image

The following tutorial shows you how to use CSS to do «CSS prevent a link tag from adding extra padding below an image».

CSS Style

The CSS style to do «CSS prevent a link tag from adding extra padding below an image» is

a < background:red; > a img < vertical-align:bottom; >

HTML Body

body> a href="#">img src="http://i50.tinypic.com/2poy3kl.jpg">   

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> a< background: red; > a img < vertical-align: bottom; >  body> a href="#">img src="http://i50.tinypic.com/2poy3kl.jpg" />   

Related

• CSS get a link to properly contain an image (Demo 4)
• CSS place an image after a link
• CSS place an image behind my navigation links
• CSS prevent a link tag from adding extra padding below an image
• CSS prevent a link tag from adding extra padding below an image (Demo 2)
• CSS prevent a link tag from adding extra padding below an image (Demo 3)
• CSS make an image blink

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

Fix Padded Image Links with Negative Margins

This is a pretty basic trick that will be obvious to many of you. But for whatever reason, the solution to it always kind of eluded me so I’m sharing it here. I like padded links. Where you give links in body content a little padding, background, and rounded corners.

A “padded” link

The problem is that when you make images into links, this padding shows up in ungainly ways.

How I used to fix it was to use a sledgehammer instead of a chisel. That is, I wrote some jQuery to remove the padding for those images.

I did that because jquery has the .has() function which is able to see if an elements contains another element, which CSS lacks. It might be cool if we could do this in CSS…

… but we can’t. Another way would be to add a class to all links that contain images like class="imageLink". I have no particular problem with the semantics of that, but it’s not as future-friendly as I might like. Perhaps a future design of the site doesn’t use padded links and now all those old links have an unneeded class name.

As it turns out, the easy way to handle this is apply some negative horizontal margins to the image inside.

That will yank the extra padding away from the outside and leave you with a clean nubby-free image. View Demo Note that in the demo I used a class to fix the problem, the very thing I told you not to do above. This was just for demo purposes since I wanted a problem image and a fixed image on the same page.

Источник

2 Simplest Ways to Add Padding Around the Image in HTML

Wanna know how to add padding around the image in HTML? Here I explained two simple methods to add padding around any image using HTML.

Padding around the image means the blank space around the image. If you’re attaching an image to your website using HTML, then you would need to add padding around it and here in this post, I will guide you how to do so. I’ve 2 very simple methods to add padding around the image in HTML.

Here’s How to Add Padding Around the Image in HTML

The two simple methods for setting up the padding around the image in HTML are following:

Method #1: Using hspace and vspace Attributes

Both of these attributes are used to specify the whitespace around the image. The hspace puts white space on left and right side of an image whereas vspace attribute specifies white space on top and bottom side of an image.

Here’s the syntax of using hspace and vspace attributes:

Now, here’s an example of an image with 20 pixels of padding around it with the help of hspace and vspace attributes:

This is some text. This is some text. This is some text.

Just use this syntax to add padding or margin around the image. Isn’t it easy to add padding around image using hspace and vspace attributes?

But, before using it anywhere you should be careful of its compatibility issues. Both of these attributes of are not supported in HTML5. So, you can use CSS instead. And the second method is all about setting up the padding around the image using CSS.

Method #2: Using CSS Padding Property

As I above told you hspace and vspace attributes don’t work in HTML5 but CSS works in almost every new technology.

Here’s an example of using padding property in HTML inside tag:

The padding property can have from one to four values.

padding: 25px 50px 75px 100px;

• top padding is 25px
• right padding is 50px
• bottom padding is 75px
• left padding is 100px

padding: 25px 50px 75px;

That’s all guys! I hope with the help of this article you will be able to add padding around any image in HTML. Let me know which method you liked more? Or is there anybody who wanna share any other method for the same? Our comment box is waiting for you. 😉

Источник

Using background images with links

Associating icons with links can in my opinion be a powerful design device. With a small amount of CSS it is simple to add icons into your links.

To apply an icon to links in CSS you use background-image. Although you should use icons on links sparingly icons can greatly improve the usability of a site. In this example we have a link that goes to a journal entry page. Make an icon using Illustrator, Photoshop or your favorite imaging software. Make sure that it relates well to the size of the text it appears next to. Here I’ve made a simple pencil:

The Markup ¶

In this example we have a simple link within a div

div id="example-link">  a href="#">Link to journal articlea> div> 

The CSS ¶

#example-link a   padding-left: 15px;  background: url(/images/examples/bglinks/pencil_icon.gif) 3px 1px no-repeat; > 

Explanation: ¶

Padding left — This moves the text away from the image. Depending on the width of your image you will need more or less padding

Background — This has the rules associated with the the background image

• url(/images/examples/bglinks/pencil_icon.gif) — This is the path the image you want to be your icon.
• 3px 1px — These values position the background image. The first value is the background image’s distance from the left of the a tag, the second is the distance from the top of the a tag.
• No-repeat tells the browser only to show the image once.

The code in action ¶

A simple icon applied to a link using CSS. (If you are reading this in a newsreader you won’t see the image)

Tags

Can you help make this article better? You can edit it here and send me a pull request.

See Also

• Writing good XHTML and CSS Part 2
  Oct 7, 2006
  The second in a series of good practices for writing XHTML and CSS looking at writing clean, maintainable code and dealing with browser hell problems.
• Preparing for IE7 — Limiting CSS Hacks
  Sep 28, 2006
  Internet Explorer 7 is just around the corner and there have been warnings from Microsoft that existing hacks will break layouts in IE7. By limiting the use of hacks your CSS can be both backwards and forwards compliant.
• Writing good XHTML and CSS Part 1
  Sep 26, 2006
  In two articles I’m going to outline my opinion on what you need to understand and write high quality XTHML and CSS. The articles will focus on producing code that stands up to the rigors of the web and future proofs code. The articles are aimed at coders starting out and looking to get to grips with writing professional front end code. Of course if you don’t agree with something the comments box is there for you to add your opinion. In part 1 I’m going to look at what you need to get off the ground.

Источник