[CSS]image下方多余像素问题解决

问题代码：
  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style>
  7. 	p {
  8. 		border:1px solid red;
  9. 		background:#eee;
  10. 	}
  11. 	#img2 {
  12. 		width:200px;
  13. 		height:200px;
  14. 	}
  15.   </style>
  16.  </head>
  17.  <body>
  18.   <p><img src="1.jpg" id="img2"></p>
  19.  </body>
  20. </html>

方法1：设置image的display为block
  1. p {
  2. 		border:1px solid red;
  3. 		background:#eee;
  4. 	}
  5. #img2 {
  6. 		display:block;
  7. 		width:200px;
  8. 		height:200px;
  9. 	}

方法2：修改image的vertical-align为非默认值（middle/top/bottom）
  1. p {
  2. 		border:1px solid red;
  3. 		background:#eee;
  4. 	}
  5. #img2 {
  6. 		width:200px;
  7. 		height:200px;
  8. 		vertical-align:middle;
  9. 	}

方法3：设置p的line-height为0
  1. p {
  2. 		border:1px solid red;
  3. 		background:#eee;
  4. 		line-height:0;
  5. 	}
  6. #img2 {
  7. 		width:200px;
  8. 		height:200px;
  9. 	}

方法4：设置p的font-size为0
  1. p {
  2. 		border:1px solid red;
  3. 		background:#eee;
  4. 		font-size:0;
  5. 	}
  6. #img2 {
  7. 		width:200px;
  8. 		height:200px;
  9. 	}

posted @ 2017-05-05 09:30  enginex  阅读(283)  评论(0)  编辑  收藏  举报