So I've encountered a little but infuriating issue with a website I'm currently working on. There's a panel that just won't cooperate.
I have a simple box div where I want to display two images stacked on top of each other without any space in between.
The problem is, no matter what adjustments I make during development, once the site is published, there is always spacing between the images.
Typically, I don't set specific widths or heights for elements, but this has been such a headache that I've resorted to declaring heights for everything to ensure precision, yet the issue persists.
Here's an example of the problem (on my server):
If you take a look, there's around a 5px gap between the top and bottom images regardless of the browser used (Firefox, Internet Explorer, Chrome) ... it's behaving like tables...
Below is the inline CSS code I've been testing/isolating:
<style type="text/css">
body{ margin:0px; padding:0px;}
.nospacedammit{ margin:0px; padding:0px;}
#portS_mainW{ width:400px; height:500px; padding:0px; margin:0px;}
#portS_mainW img{ margin:0px; padding:0px; }
</style>
And here’s the basic HTML structure for this panel:
<div id="portS_mainW">
<span class="nospacedammit"><img src="images/xrodemo.jpg" alt="xro" width="400" height="300"/></span>
<span class="nospacedammit"><img src="images/erase.png" alt="xro" width="400" height="200"/></span>
</div>
I've meticulously added heights to double-check the measurements, applied zero margins and paddings to all elements to eliminate any spaces.
In an attempt to force no spacing at all, I even wrapped each image in a span tag and applied a universal zero-style CSS. Yet, nothing seems to work.
If you have any suggestions or insights, I would greatly appreciate it.
Thank you in advance.