上的img表示什么_html元素img之间会有空隙的原因以及如何消除
* {
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;
}
根据我们的案例，边框、边界、边距都设置成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}