解决图片间隙

时间:2021-04-28 20:31:20

html

 

<div class="tu">
		<img src="img/shouye-hezuohuoban-001-b.JPG"/>
		<img src="img/shouye-hezuohuoban-001-b.JPG"/>
		<img src="img/shouye-hezuohuoban-001-b.JPG"/>
		<img src="img/shouye-hezuohuoban-001-b.JPG"/>
		<img src="img/shouye-hezuohuoban-001-b.JPG"/>
		<img src="img/shouye-hezuohuoban-001-b.JPG"/>
		<img src="img/shouye-hezuohuoban-001-b.JPG"/>
		<img src="img/shouye-hezuohuoban-001-b.JPG"/>
		<img src="img/shouye-hezuohuoban-001-b.JPG"/>
		<img src="img/shouye-hezuohuoban-001-b.JPG"/>
	</div>

 

css代码 

.tu{
	width: 1000px;
	height: 296px;
	margin:  0  auto;
	background-color: red;
	}

效果图

解决图片间隙

 

解决方法

  第一种 给img标签设置css样式 代码如下

img{
	border:none;  
	display:block;
	float: left;
	}

第二种 给所在的父级加font-size:0px; 修改后的代码

.tu{
	width: 1000px;
	height: 296px;
	margin:  0  auto;
	background-color: red;
	font-size:0px; 
	}

修改后效果图

解决图片间隙