盒子含图片多出几像素高度的问题

问题

当一个盒子中含有一张图片,即使这个盒子(不管是块级元素还是行内块)没有设置高度,也会被内容撑起来等于图片的高度,但是事实并非如此。盒子的高度不等于图片的高度,而是多出了几像素,而这种问题出现在,html5、xhtml1.0 strict、xhtml1.1、html4.01 strict中。

代码


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style type="text/css">
		.box1{		
			background-color:pink;
		}
		
	style>
head>
<body>
	<div class="box1">
		<img src="../images/3.jpg" alt="">
	div>	
body>
html>

展示

盒子含图片多出几像素高度的问题_第1张图片

解决方法

1、img标签添加属性

img{
	vertical-align: top;
}

2、img的父标签添加

font-size:0;

3、img是inline-block元素转成block元素

img{
	display:block;
}

当然还有给父元素设置行高为0也可以解决。

产生原因

img下几像素空白产生原因

为什么图片下面总是会多出3-5像素

你可能感兴趣的:(前端)