-2

I have experienced in numerous implementations that an image <img> wrapped by an <a> anchor or <span> tag shows some extended padding arbitrarily on top, bottom, or either side.

Is it browser specific, related to misuse of tags, or considered a flaw in html?

JYelton
  • 35,664
  • 27
  • 132
  • 191
Shoaib Nawaz
  • 2,302
  • 4
  • 29
  • 38

1 Answers1

3

Images are (by default) rendered inline, and thus are treated as characters. Their default vertical-align setting is such that there is space below them for descenders (which you find on letters such as j, y and g, but not a, b or c) and there may be space above them depending on the current line height.

White space between the start tag of the span or anchor and the img tag, or between the img tag and the end tag of the span/anchor is significant (so the padding to the side is more likely to be a space)

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Adding to your answer, David: if the OP were to break apart the anchor tag in such a way that it leaves no white space before or after the image tag, unwanted space should disappear. See these related questions: http://stackoverflow.com/questions/1097006/removing-whitespace-between-html-elements-when-using-line-breaks http://stackoverflow.com/questions/134683/why-do-small-spaces-keep-showing-up-in-my-web-pages – JYelton Jan 12 '11 at 19:54