形成情况:
- 外部的不设置宽高, 由内部图片撑开
- 撑开后, 底部会有空隙
问题原因:
- div元素中的行内元素的默认
vertical-align
对齐方式是基线baseline
- img是行内元素, 所以会与基线对齐, 造成底下的空隙
解放方法:
- img标签转换为块级元素:
display: block
- 设置外层div的字体大小为0,
font-size: 0
- 设置img垂直方向的对齐方式, 只要是其他三种皆可,
vertical-align:bottom
,vertical-align:middle
,vertical-align:top
-
相关阅读:
阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_01 File类_2_File类的静态成员变量
阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第6节 Lambda表达式_8_Lambda省略格式&Lambda使用前
阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第6节 Lambda表达式_7_Lambda表达式有参数有返回值的练习
阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第6节 Lambda表达式_6_Lambda表达式有参数有返回值的
阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第6节 Lambda表达式_5_Lambda表达式的无参数无返回值的
阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第6节 Lambda表达式_3_编程思想转换&体验Lambda的更优写法
阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第6节 Lambda表达式_2_冗余的Runnable代码
阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第6节 Lambda表达式_1_函数式编程思想概述
阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第5节 线程池_2_线程池的代码实现
阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第5节 线程池_1_线程池的概念和原理
- 原文地址:https://www.cnblogs.com/zhangrunhao/p/7347495.html