图片底部空缺缝隙解决法方案（CSS)

当我想实现一个垂直轮播图时，图片底部会出现一个空缺缝隙导致切换轮播图片显示不完整。
这里可以用两个方法解决
一、给图片添加(垂直对齐)vertical-align:baseline|middle|top;

vertical-align属性的值可以是
（1）关键字值:baseline|middle|top|bottom|sub|text-top|text-bottom;
               （ 基线）起点|中心|顶部|底部|向下位置|(文本)顶部|(文本)底部
（2）<length> 长度值:10em|4px;
（3）<percentage>百分比值:50%；
（4）全局值：inherit|revert|revert-layer|unset|initial;
inherit（继续）——指定一个属性值应该从其父元素继续。
【如果父元素没有为该属性显式设置值，浏览器会沿着DOM树向上查找，直到找到一个定义了该属性的值，或者到达文档的根节点。如果在整个DOM树中都找不到定义的值，浏览器将使用其默认值。】
revert（还原）——样式重置为浏览器默认值。
【revert关键字的几个要点:
1.revert关键字可以应用于任何CSS属性;
2.如果用户定义样式表中显式设置了某个属性，revert关键字不会覆盖这些设置，而是保留用户定义的值;
3.如果用户定义样式表中没有显式设置某个属性，revert关键字会将属性值重置为浏览器默认值;
4.revert关键字的效果与unset关键字雷同，但unset在属性没有默认值时会将该属性值设置为initial;
5.revert关键字在Safari 9.1+和iOS 9.3+中得到支持。】
revert-layer（还原层）——CSS全局关键字，用于控制样式的继续和覆盖。
【继续样式 ：revert-layer 的效果值将匹配上一个级联层或下一个匹配规则，允许你从当前规则跳到上一个级联层，从而继续另一个选择器的样式。
防止样式泄露 ：使用 revert-layer 可以防止级联层中最靠近的选择器的样式泄露到当前规则，这在重构CSS或重设样式时特别有用。
简化开发体验 ：revert 关键字及其 revert-layer 值可以进步开发体验，尤其是在使用 display: none 或其他显示属性时。】
unset（未设置）——将一个属性重新重新设置为其从父母那继续的属性值，如果没有继续则是重置成初始值。它可以应用到所有的css属性上，包括css简写。
initial（初始值）——将CSS属性重置为它的默认值。(IE不支持)
CSS中vertical-align属性用来指定行内（inline）、行内区块（inline-block）、表格单元格（table-cell）盒子的垂直对齐方式。
vertical-align 属性可被用于两种上下文：

• 使行内元素盒模型与其行内元素容器垂直对齐。比方，用于垂直对齐行文本内的图片。
  
• 垂直对齐表格单元格的内容
  

二、把图片转换为块元素display:block;

display属性设置元素是否被视为块级或行级盒子以及用于子元素的布局，比方流式布局、网格布局或弹性布局。
语法：

1. /* 预组合值 */
2. display: block;
3. display: inline;
4. display: inline-block;
5. display: flex;
6. display: inline-flex;
7. display: grid;
8. display: inline-grid;
9. display: flow-root;
11. /* 生成盒子 */
12. display: none;
13. display: contents;
15. /* 多关键字语法 */
16. display: block flex;
17. display: block flow;
18. display: block flow-root;
19. display: block grid;
20. display: inline flex;
21. display: inline flow;
22. display: inline flow-root;
23. display: inline grid;
25. /* 其他值 */
26. display: table;
27. display: table-row; /* 所有的 table 元素 都有等效的 CSS display 值 */
28. display: list-item;
30. /* 全局值 */
31. display: inherit;
32. display: initial;
33. display: revert;
34. display: revert-layer;
35. display: unset;

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。