table及div中img下方留白&div宽度随内容而变
来源:互联网 发布:怎样查看linux登录锁定 编辑:程序博客网 时间:2024/06/14 18:40
昨天实训的同学学习table的时候碰到了一个问题。
1.td里面放了一张img,设置所有内外边距为0,宽高不设,图片底下有一条白边。
问题扩展:查阅之后发现在div内也有此问题,但是因为平时div一般不显示边框所以一直没注意到这个细节。
如图:
上为td中img,下图为div中的img。
查阅之后发现是css中的基线问题:
解决方法:
1.设置父元素的font-size设置为0。
2.设置父元素的line-height设置为0或1。
3.设置img的display为block。
书中给出的方法为font-size和line-height同时为1;单独设置任何一个为0都可以实现效果。会产生什么负面影响待验证。
display为block在多张图片时需要设置相应的浮动以及overflow。会比较麻烦
验证inline-block并无法生效。
2.div随内容宽度自适应。
查阅得知设置div{width:auto;display:inline-block!important;display:inline}
经测试发现,只对div设置display:inline-block;即可达到想要的效果。
上面的再设置display:inline不知道是因为什么,希望朋友们能指出谢谢。
阅读全文
0 0
- table及div中img下方留白&div宽度随内容而变
- 如何解决div中img图片下方空白问题
- div中img图片下方空白问题,div高度不等于img图片的高度,会留出几个像素
- DIV背景图片随DIV高度宽度变化而自动拉伸
- Div或Table内容超出宽度时隐藏
- jquery控制页面 div块中所有img 宽度
- [css]CSS如何让DIV的宽度随内容的改变而改变
- CSS如何让DIV的宽度随内容的改变而改变
- CSS如何让DIV的宽度随内容的改变而改变
- div中添加<img>后图片下方多出3px空白
- 图片在已固定宽度的DIV及TABLE中自适应
- div或img图片高度随宽度自适应
- div 中img 居中
- div包含<img/>时,图片下方出现空隙的解决方法
- IE6 IE7: div中 table 宽度100% 引发的血案
- DIV或Table中文字过多自动变.的解决办法
- 左右div内容互换(单击左边div里的一项内容,此内容变没,跑到右边div中)
- img在div中居中
- 全局对象
- 一个黑科技,不仅可以浪漫享受电影时光,还能让你“凭空作画” | 钛空智慧星球推荐
- 关于opencv3.3.0+vs2015 +x86debug版本配置方法
- mysql
- 创投日报:11月14日收录投融资项目13起
- table及div中img下方留白&div宽度随内容而变
- 携程就“亲子园事件”发表通报;.一点资讯获1.12亿美元融资;亚马逊AWS否认出售中国区云计算业务丨价值早报
- 慢查询和innobackup备份导致数据库挂起
- 【云星数据---Apache Flink实战系列(精品版)】:Apache Flink实战基础0018--IDEA搭建非maven管理的集成开发环境003
- Error: java.util.concurrent.ExecutionException: com.android.ide.common.process.ProcessException:错误
- centos6安装,配置,启动apache
- windows 安装python 2.7 安装pip 步骤
- linux 加解压命令记录
- C++中的static关键字的总结