问题代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
border:1px solid red;
background:#eee;
}
#img2 {
width:200px;
height:200px;
}
</style>
</head>
<body>
<p><img src="1.jpg" id="img2"></p>
</body>
</html>
|
方法1：设置image的display为block
1
2
3
4
5
6
7
8
9
| p {
border:1px solid red;
background:#eee;
}
#img2 {
display:block;
width:200px;
height:200px;
}
|
方法2：修改image的vertical-align为非默认值（middle/top/bottom）
1
2
3
4
5
6
7
8
9
| p {
border:1px solid red;
background:#eee;
}
#img2 {
width:200px;
height:200px;
vertical-align:middle;
}
|
方法3：设置p的line-height为0
1
2
3
4
5
6
7
8
9
| p {
border:1px solid red;
background:#eee;
line-height:0;
}
#img2 {
width:200px;
height:200px;
}
|
方法4：设置p的font-size为0
1
2
3
4
5
6
7
8
9
| p {
border:1px solid red;
background:#eee;
font-size:0;
}
#img2 {
width:200px;
height:200px;
}
|