肉饼博客

Talk is cheap. Show me the code.

0%

【CSS】image下方多余像素问题解决

问题代码:

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;
}