CODEWITHSUNDEEP
html
Laziale
Laziale

Reputation: 8225

vertical spacing between images

I cut one image to three equal images and now I have it in the html code like this:

                        <img src="images/disclosure2_01.jpg" alt="Disclosure">
                        <img src="images/disclosure2_02.gif" alt="Disclosure2">
                        <img src="images/disclosure2_03.gif" alt="Disclosure3">

The images render at the website like this: enter image description here

I want to know if its possible to remove that vertical spacing between the images and the images to look like one whole picture. Thanks in advance for your help.

Upvotes: 4

Views: 13128

Answers (5)

chuchurex
chuchurex

Reputation: 41

The vertical space is because the property "display" is "inline", it is solved leaving the font size at zero, in its parent element. Or changing the display property to the images to "block". 

<div style="font-size:0">
   <img src="images/disclosure2_01.jpg" alt="Disclosure">
   <img src="images/disclosure2_02.gif" alt="Disclosure2">
   <img src="images/disclosure2_03.gif" alt="Disclosure3">
</div>

Upvotes: 4

MauroPorras
MauroPorras

Reputation: 5193

Set the images' vertical-align to middle:

img {
  vertical-align: middle;
}
<img src="https://dummyimage.com/600x100/150/6ff">
<img src="https://dummyimage.com/600x100/6ff/150">

Upvotes: 1

Christopher Thrower
Christopher Thrower

Reputation: 730

Is there any CSS adding margin/padding to the images?

Try adding this;

img { padding: 0; margin: 0; }

Upvotes: 1

jirkamat
jirkamat

Reputation: 1788

Set each image's margin and padding to 0.

<img style="margin:0px; padding:0px;" src="..." />

Upvotes: 1

Satish
Satish

Reputation: 6485

try this. Remove the lines between them.

<img src="images/disclosure2_01.jpg" alt="Disclosure"><img src="images/disclosure2_02.gif" alt="Disclosure2"><img src="images/disclosure2_03.gif" alt="Disclosure3">

or tinker with css.

img { padding: 0; margin: 0; }

Upvotes: 3

Related Questions