How to remove the gaps between pictures? _html/css

How to remove the gaps between pictures? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:03:24

Original

2051 people have browsed it

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>水平滚动图片</title><style>* {border:0; margin:0; padding:0;}</style></head><body><div id="scroller"><div id="images"><a href="http://www.baidu.com"><img width="150px" height="150px" /></a><a href="http://www.baidu.com"><img width="150px" height="150px" /></a><a href="http://www.baidu.com"><img width="150px" height="150px" /></a><a href="http://www.baidu.com"><img width="150px" height="150px" /></a><a href="http://www.baidu.com"><img width="150px" height="150px" /></a></div><div><img width="150px" height="150px" /><img width="150px" height="150px" /></div></div></body></html>

Copy after login

Reply to discussion (solution)

You can just remove the line breaks in the code

<div id="images"><a href="http://www.baidu.com"><img width="150px" height="150px" /></a><a href="http://www.baidu.com"><img width="150px" height="150px" /></a><a href="http://www.baidu.com"><img width="150px" height="150px" /></a><a href="http://www.baidu.com"><img width="150px" height="150px" /></a><a href="http://www.baidu.com"><img width="150px" height="150px" /></a></div>

Copy after login

Or directly set the float

img{float:left;}

Copy after login

I tried it, and it works

magically. . Why is this?

Lord, please give points if other people’s answers are feasible.

You can just remove the line breaks in the code

<div id="images"><a href="http://www.baidu.com"><img width="150px" height="150px" /></a><a href="http://www.baidu.com"><img width="150px" height="150px" /></a><a href="http://www.baidu.com"><img width="150px" height="150px" /></a><a href="http://www.baidu.com"><img width="150px" height="150px" /></a><a href="http://www.baidu.com"><img width="150px" height="150px" /></a></div>

Copy after login

or set the float directly

img{float:left;}

Copy after login

Why is this happening? Is there any idea? explain?

All elements with the display:inline-block attribute have a characteristic, that is, code line breaks will be parsed as blanks. There is no reason. This is the rendering mechanism of the browser. Based on this, if the code is cleared Line breaks can be solved, but you don’t want all the code to be crowded together, then you can set up floats to solve the problem. The purpose is nothing more than to make the block attribute elements display in the same row

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>.box{width:100px;height:100px;background:#ccc; display:inline-block;}</style></head><body><div class="box"></div><div class="box"></div><div class="box"></div></body></html>

Copy after login

I suggest You set an img tag to standardize the img of the entire site, so that there are no gaps in the pictures of the entire site
The code is as follows:
img {
vertical-align: top;
}

You can use a table to do it, and then set the image to the left or right (text-align: left), I hope it will be useful to you

Try adding style="display:block" to img

Learned