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

问题代码：

    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3.  <head>
    4. 

  4.   <meta charset="UTF-8">
    5. 

  5.   <title>Document</title>
    6. 

  6.   <style>
    7. 

  7. 	p {
    8. 

  8. 		border:1px solid red;
    9. 

  9. 		background:#eee;
    10. 

  10. 	}
    11. 

  11. 	#img2 {
    12. 

  12. 		width:200px;
    13. 

  13. 		height:200px;
    14. 

  14. 	}
    15. 

  15.   </style>
    16. 

  16.  </head>
    17. 

  17.  <body>
    18. 

  18.   <p><img src="1.jpg" id="img2"></p>
    19. 

  19.  </body>
    20. 

  20. </html>
    21.

方法1：设置image的display为block

    

  1. p {
    2. 

  2. 		border:1px solid red;
    3. 

  3. 		background:#eee;
    4. 

  4. 	}
    5. 

  5. #img2 {
    6. 

  6. 		display:block;
    7. 

  7. 		width:200px;
    8. 

  8. 		height:200px;
    9. 

  9. 	}
    10.

方法2：修改image的vertical-align为非默认值（middle/top/bottom）

    

  1. p {
    2. 

  2. 		border:1px solid red;
    3. 

  3. 		background:#eee;
    4. 

  4. 	}
    5. 

  5. #img2 {
    6. 

  6. 		width:200px;
    7. 

  7. 		height:200px;
    8. 

  8. 		vertical-align:middle;
    9. 

  9. 	}
    10.

方法3：设置p的line-height为0

    

  1. p {
    2. 

  2. 		border:1px solid red;
    3. 

  3. 		background:#eee;
    4. 

  4. 		line-height:0;
    5. 

  5. 	}
    6. 

  6. #img2 {
    7. 

  7. 		width:200px;
    8. 

  8. 		height:200px;
    9. 

  9. 	}
    10.

方法4：设置p的font-size为0

    

  1. p {
    2. 

  2. 		border:1px solid red;
    3. 

  3. 		background:#eee;
    4. 

  4. 		font-size:0;
    5. 

  5. 	}
    6. 

  6. #img2 {
    7. 

  7. 		width:200px;
    8. 

  8. 		height:200px;
    9. 

  9. 	}
    10.
时间： 2024-12-17 08:31:27

[CSS]image下方多余像素问题解决的相关文章

如何消除网页下方多余的空白

在使用dreamweaver或者frontpage来制作HTML网页时,我们有可能会遇到这样的问题:在软件中好好的网页一旦放到浏览器中,就会在网页的下方莫名其妙的多出来或多或少的空白.那么这种空白又要怎么去消除呢? 起先我以为只要在网页的代码中加一个CSS来约束一下网页的高度就行了,事实证明这样是行不通的. 原因: 首先我们要知道,用软件来写网页的话,大多数都是通过图形化的界面来"堆"网页,这样堆网页的话,在创建层或者表格的时候,软件给层或者表格定义的高度往往会超出我们所想要的高度,但

CSS标签内多余内容隐藏

CSS: 1 <style> 2 .mazey{width:100px;} 3 .nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} 4 </style> HTML: 1 <div class="mazey nowrap">http://www.mazey.net/baby/blog/#http://www.mazey.net/baby/blog/#http://www

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important

关于采用css样式将多余的文字隐藏，以及实现树形菜单

前不久根据项目需要,需要写个页面,在页面中需要动态的实现一个树形的菜单,经过问度娘,选择使用一个treeTable的js插件.http://zhanchaojiang.com/demo/demo/treeTable.html这是对该插件的介绍地址.在这个插件中有如下几个树形:theme:default或者是vsStyle,默认为default,差别应该在样式上,default是加减号,vsStyle是三角.expandLevel:默认展开的层数,默认值为1.也就是刷新该页面时树状图展开的层次.c

vs2015web工程引用bootstrap.min.css无法智能提示的问题解决

环境:win10x64 vs2015企业版 项目:空白web项目(.net framework4) 问题:html页面加入压缩后的css(eg:bootstrap.min.css),编码的时候无法智能提示 解决方案 只需要将对应的未压缩的css(eg:bootstrap.css)也加入项目中 pass:html无需引用未压缩的css(eg:html仍引用bootstrap.min.css),就可以智能提示了 写在最后 经测试,vs2010里面是没有这个问题的 经测试,所有aspx页面没有这个问题

css实现0.5像素

.border{ position: relative; } .border:before{ content: ''; position: absolute; width: 200%; height: 200%; border: 1px solid red; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transfor

css实现隐藏多余溢出文字并显示省略号

<meta charset="utf-8" /> <style> .txt{ width:200px; border:1px solid #ddd; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> <p class="txt">溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏</p>

解决CSS图片底部3像素问题总结

1 环境说明 JDK: 1.8 MAVEN: 3. SpringBoot: 2.0.4 2 SpringBoot集成Mybatis-Plus 2.1 创建SpringBoot 利用IDEA创建SpringBoot项目,引入web mysql mybatis-plus lombok devtools依 ... 653rai悼抑戳眯陨桨<http://baobao.baidu.com/question/ba4ad4dffdea7da838c2d08783ca1801.html?=D>435rqv示

0520日重点: CSS像素,设备像素以及dpr

1.设备像素(device independent pixels): 设备屏幕的物理像素,任何设备的物理像素的数量都是固定的 2.CSS像素(CSS pixels): 又称为逻辑像素,是为web开发者创造的,在CSS和javascript中使用的一个抽象的层 3.设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素和CSS像素的比值 实际上,此时的CSS像素对应着以后要提到的理想视口,其对应的javascript属性是screen.width/screen.