Menu
I am new to HTML5, i'm trying to understand this concept of handling images in HTML5 see this http://mavintophospital.com/test/test.html
Example 1: I have not added any margin or padding between the images, but by default browser adds 5px of space/gap between images
Example 2: the width of image itself is too high so it aligns one below the other, but here browser doesn't add any space.
Why is this happening?
This is what i want to achive: http://mavintophospital.com/test/test1.html
Here I made the image fluid by giving it width: 100%
but a 5px space/gap is added by browser at the bottom of the image to its container.
I want to remove it.
I have tried giving it absolute positioning but it mess up.
All this happens only when I use <!DOCTYPE html> - HTML5 doctype
445
asked Feb 04 '26 17:02
Your first question is answered by white space. change
<img alt="Some thing about Coral JQM" src="test_files/red0.png">
<img alt="Some thing about Coral JQM" src="test_files/red0.png">
<img alt="Some thing about Coral JQM" src="test_files/red0.png">
to a single line
<img alt="Some thing about Coral JQM" src="test_files/red0.png"><img alt="Some thing about Coral JQM" src="test_files/red0.png"><img alt="Some thing about Coral JQM" src="test_files/red0.png">
For you second question set the vertical-align style to top.
<div style="background: #ff0">
<img style="width: 100%; vertical-align:top;" alt="Some thing about Coral JQM" src="test1_files/red.png">
</div>
Images are rendered like inline elements and therefore are sensitive to white space and have a gap at the bottom reserved for descender text elements (e.g. j, g, y). Remove the white space between your images either by simply pushing the elements next to each other in your code, or placing HTML comments between them (e.g. <img><!-- --><img>). To remove the gap below the image, set the vertical-align property to top. The default is baseline.
jsFiddle example (vertical-align:top)
jsFiddle example (white space removed and vertical-align:top)
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
