css去除img左右之间的间距

方法一:给父级元素样式设置font-size:0;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>去除图片间距</title>
		<style type="text/css">
			.imgs {
     
				font-size: 0;
			}
		</style>
	</head>
	<body>
		<div class="imgs">
			<img src="../img/moom1.jpg"/ width="100px">
			<img src="../img/moom1.jpg"/ width="100px">
			<img src="../img/moom1.jpg"/ width="100px">
			<img src="../img/moom1.jpg"/ width="100px">
		</div>
	</body>
</html>

方法二:利用flex布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>去除图片间距</title>
		<style type="text/css">
			.imgs2 {
     
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
			}
		</style>
	</head>
	<body>
		<div class="imgs2">
			<img src="../img/moom1.jpg"/ width="100px">
			<img src="../img/moom1.jpg"/ width="100px">
			<img src="../img/moom1.jpg"/ width="100px">
			<img src="../img/moom1.jpg"/ width="100px">
		</div>
	</body>
</html>

方法三:利用float

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>去除图片间距</title>
		<style type="text/css">
			.imgs3 img{
     
				float: left;
			}
			/*清除浮动*/
			.imgs3::after {
     
				content: '';
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="imgs3">
			<img src="../img/moom1.jpg"/ width="100px">
			<img src="../img/moom1.jpg"/ width="100px">
			<img src="../img/moom1.jpg"/ width="100px">
			<img src="../img/moom1.jpg"/ width="100px">
		</div>
	</body>
</html>

你可能感兴趣的:(CSS,css,清除img默认的间距)