-1

I have an issue where 1x1 pixel is adding some extra space (way more than 1px in height) on the page. After doing some quick Googling, I have found that this is a common issue. My understanding is that tags are inline and thus interpreted as text.

  1. Extra spacing after an A Tag/img tag?
  2. Extra padding under an <img> tag?
  3. Image inside div has extra space below the image

My problem is that while I can replicate the fix on the live site--when I delete the tag or change its styling to display: block, the excess space disappears--I cannot replicate the problem on a simplified HTML page. Even after I copied the exact code from link #3 into a new HTML document, I could not replicate the issue with the exact same code as in link 3.

I'd like to understand what exactly causes this problem before rolling out a production-level fix. Does anyone have any ideas about what factors exactly cause this?

EDIT: I'm attaching a screenshot of my implementation of the code from link #3.

enter image description here

EDIT2: I'm attaching another screenshot of the exact same JSFiddler code. So what is happening?

enter image description here

[mooved comment to question] My question is not about what is causing the issue. My question is why I see two different things in Chrome with the same code. I have attached two images to my question. In both images, you should see the same HTML markup and the same CSS. Yet Chrome is rendering them differently. My question is about what is causing this discrepancy.

Community
  • 1
  • 1
jds
  • 7,910
  • 11
  • 63
  • 101
  • 3
    Give us some context as to why you are putting a 1x1 image in your page/where it is placed. The culprit is usually line height. – David Nguyen Nov 19 '13 at 15:23
  • 2
    The issue is exactly what you said. While being inline it's interpreted as text / inline-element and therefore has a `line-height`. Remove this setting to see the differnce when using `line-height: 0;` -- Sample: http://jsfiddle.net/BZeLR/70/ – Smamatti Nov 19 '13 at 15:25
  • Right, but why can I not replicate the issue? See my edit; I've attached a screenshot of the code from link 3. I am not sure why Chrome is rendering the HTML differently in this case. – jds Nov 19 '13 at 15:34
  • @DavidNguyen, the point is that I want to replicate it without context. :) – jds Nov 19 '13 at 15:36
  • Replicate what behavior? I don't understand what you are asking. If the line height is greater than the image height, then the height will be line height. – David Nguyen Nov 19 '13 at 15:37
  • Then why isn't it in my screenshot? – jds Nov 19 '13 at 15:38
  • Because your image is `60px` tall... – David Nguyen Nov 19 '13 at 15:38
  • So why is height added to the JSFiddle when `line-height` is 1? http://jsfiddle.net/BZeLR/70/ – jds Nov 19 '13 at 15:40
  • 1
    It takes the bigger of the two line height OR the contents. If you are talking about the white space, the display of the image should be block: http://jsfiddle.net/BZeLR/71/ `1` is not a proper dimension, it should be `1px` or `1em` or `1%` – David Nguyen Nov 19 '13 at 15:46
  • Presumably, you're also aware it might be being influenced by other css called on your live site. Are you using Firebug to trace the path of inherited css? – Abernasty Nov 19 '13 at 15:51
  • Hm... I appreciate your help but I don't think we're on the same page. My question is not about what is causing the issue. My question is why I see two different things in Chrome with the same code. I have attached two images to my question. In both images, you should see the same HTML markup and the same CSS. Yet Chrome is rendering them differently. My question is about what is causing this discrepancy. – jds Nov 19 '13 at 15:58
  • @DavidNguyen the issue was the DOCTYPE. When I add a DOCTYPE to my local HTML document, it behaves as JSFiddler. Thanks again. – jds Nov 19 '13 at 16:22

2 Answers2

1

Okay, I hope I'm the guy that understand you. You have exactly same code displaying differently on exactly same browser, only difference is one on your host and the other on JS Fiddle.

To answer your question, it is a line-hight problem, and where you went wrong, is didn't define the correct line-height value, see UPDATE HERE You should use a fixed line height in px, pt, cm, etc. A number means the multiple of your current font-size. That's where the difference come from because JS Fiddle uses a css reset and has a different default font-size.

You can either change line-height to 1px, or apply vertical-align:top;

Godinall
  • 2,280
  • 1
  • 13
  • 18
  • The issue was that my local file didn't have a DOCTYPE. But I'm upvoting you because you did understand my question! :) – jds Nov 19 '13 at 16:33
  • Yes, not specifying a DOCTYPE could result in unknown issue like different default line-height/border/padding etc. However, my fix would still solve the problem given that I didn't know the DOCTYPE is missing. Anyway, all sorted now that's the important thing. – Godinall Nov 19 '13 at 16:35
0

Your question about why it's different from a browser to another : browsers apply their own styling.

See http://www.iecss.com/ just to understand how IE displays elements differently from a version to another.

To fix your situation, you have to 'reset' the styling so browsers will do has you ask.

You have to style your elements, oterwhise, the browser will.

#wrapper img{display:block;line-height:0}

Also, searche for Style Precedence, Specificity, Inheritance, and the Cascade

See your fiddle updated

[after re-reading your question] My question is why I see two different things in Chrome with the same code.

You are DRUNK !

[after reading your last comment] Ahhhh, the issue was the DOCTYPE!

Slow down on alcool.

and you can downvote me for NOT understanding your question.

Cheerz!

Milche Patern
  • 19,632
  • 6
  • 35
  • 52
  • Both screenshots were taken while in Chrome. Whatever default styling Chrome applies, wouldn't it be consistent? I could see an argument for JSFiddle applying a styling, but then which style is it? – jds Nov 19 '13 at 16:09
  • Ahhhh, the issue was the DOCTYPE! – jds Nov 19 '13 at 16:21