Vertical Spacing Between Images

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

Solution 1:

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".

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

Solution 2:

try this. Remove the lines between them.

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

or tinker with css.

img { padding: 0; margin: 0; } 

Solution 3:

Set each image's margin and padding to 0.

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

Solution 4:

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

Try adding this;

img { padding: 0; margin: 0; } 

Solution 5:

Set the images' vertical-align to middle:

img {
  vertical-align: middle;
}

<imgsrc="https://dummyimage.com/600x100/150/6ff"><imgsrc="https://dummyimage.com/600x100/6ff/150">