zoukankan      html  css  js  c++  java

  • [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. 	}
  • 相关阅读:
    共用体
    建立动态链表
    动态分配储存与链表
    结构指针变量作函数参数
    R语言实战 第7章
    R-6 线性回归模型流程
    R-5 相关分析-卡方分析
    R-4 方差分析
    R-3 t分布--t置信区间--t检验
    R-2
  • 原文地址：https://www.cnblogs.com/enginex/p/6811323.html
Copyright © 2011-2022 走看看