<html xmlns=\"大众http://www.w3.org/1999/xhtml\"大众>

<head>

<meta http-equiv=\"大众Content-Type\"大众 content=\公众text/html; charset=utf-8\"大众 />

html上下图片缝隙html元素img之间会有闲暇的原因以及若何清除 JavaScript

<title>网站页面</title>

<style type=\公众text/css\"大众>

{

margin: 0px;

padding: 0px;

border-top-width: 0px;

border-right-width: 0px;

border-bottom-width: 0px;

border-left-width: 0px;

}

body {

background-color: #FFFFFF;

text-align: center;

font-family: \"大众宋体\公众;

font-size: 12px;

color: #575757;

}

#banner {

height: 210px;

width: 982px;

margin: 0 auto;

}

#menu {

height: 87px;

width: 982px;

margin: 0 auto;

}

</style>

</head>

<body>

<div id=\公众box\"大众>

<div id=\公众banner\公众><img src=\"大众images/203.jpg\"大众 width=\"大众982\公众 height=\"大众210\"大众 alt=\公众banner\"大众 /></div>

<div id=\"大众menu\"大众><img src=\"大众images/204.jpg\"大众 width=\"大众223\"大众 height=\公众80\"大众 alt=\"大众gamestart\公众 />

<img src=\公众images/205.jpg\公众 width=\公众106\"大众 height=\"大众80\"大众 alt=\公众menu1\公众 />

<img src=\"大众images/206.jpg\公众 width=\"大众102\"大众 height=\公众80\"大众 alt=\公众menu2\公众 />

<img src=\"大众images/207.jpg\公众 width=\"大众105\"大众 height=\公众80\"大众 alt=\"大众menu3\"大众 />

<img src=\"大众images/208.jpg\"大众 width=\"大众100\"大众 height=\公众80\"大众 alt=\"大众menu4\"大众 />

<img src=\公众images/209.jpg\"大众 width=\公众77\"大众 height=\"大众80\"大众 alt=\"大众menu5\"大众 />

<img src=\"大众images/210.jpg\"大众 width=\"大众86\"大众 height=\公众80\"大众 alt=\"大众menu6\"大众 />

<img src=\公众images/211.jpg\"大众 width=\公众77\"大众 height=\"大众80\"大众 alt=\公众menu7\"大众 />

<img src=\"大众images/212.jpg\公众 width=\"大众106\"大众 height=\"大众80\"大众 alt=\公众menu8\"大众 /></div>

</div>

</body>

</html>

根据我们的案例，边框、边界、边距都设置成0了，图片与图片之间还是有空隙，这是为什么呢？

记得之前办理的方法是，img标签符之间不要有空格或者回车。

便是写成这样的

还有些其他的方法，可以让其在水平方向上不留下空隙，也便是旁边的空隙，比如

#menu { font-size:0;} //意思是父级元素的字体大小为0，img默认是根据父元素的baseline进行对齐的，把父元素的字体大小设置为0，就没有空隙了，作为子元素的img对齐相应的也就没有空隙了

#menu {letter-spacing:-600px} //字与字之间的间隙是-600px，当然也可以适当调度这个数值。

img{float: left;} //让图片左浮动，肃清高下旁边空隙

后来展示的是这个样子的。

一些内联元素比如笔墨或图片，它默认对齐办法都是和它的父级的 baseline 去进行对齐的，但是撑开高度的却是元素整体的高度（bottom line），这样肯定就会造成一定的高下间隙。

如何办理高下空隙呢

img{ display:block}; //把img改成block，可以肃清高下间隙

img{vertical-align:top;} //改变其高下对齐办法为顶部对齐

#menu{ line-height:0 }; // 父级元素行高为0，也可以

#menu { font-size:0;}

#menu {letter-spacing:-600px}