码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-05-05 10:49:18      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:idt   document   middle   style   utf-8   com   bottom   设置   type   

问题代码:
  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. }

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

标签:idt   document   middle   style   utf-8   com   bottom   设置   type   

原文地址:http://www.cnblogs.com/enginex/p/6811323.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!