开发者

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:

vertical spacing between images

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.


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>


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; } 


Set each image's margin and padding to 0.

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


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

Try adding this;

img { padding: 0; margin: 0; } 


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜