Vertical space between images
I'm using jqm for a while now and since the beginning I stumbled upon an image problem.
Working example:
http://www.m00x.com/jqm/image.html
Whenever I put an image on a page, it has a space under it of 5px. This problem consists on both pc and mobile browsers.
The space ain't margin, padding or a border. I've put those on 0 to be sure.
For now, I always fixed it the dirty way:
- img { margin-top: -5px; }
But, of course, I dont feel happy with it :-)
Below is the code I'm using. Even in a very basic page the problem is there.
CSS
- .ui-content {
padding: 0; }
.ui-content img {
width: 100%; max-width: 100%;
border: 0;
padding: 0;
margin: 0; }
HTML
- <div data-role="page" id="home" data-theme="a">
<div data-role="content" data-theme="a">
<p>Just two images</p>
<img src="image.jpg" />
<img src="image.jpg" />
</div><!-- /content -->
<p>Images inside grid</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<img src="image.jpg" />
</div>
<div class="ui-block-b">
<img src="image.jpg" />
</div>
<div class="ui-block-a">
<img src="image.jpg" />
</div>
<div class="ui-block-b">
<img src="image.jpg" />
</div>
</div><!-- /grid-a -->
</div><!-- /page #home -->