本节学习目标：

图片、表单和旁边的文字对齐

解决图片底部默认空白缝隙问题

1.图片、表单和旁边的文字对齐

默认的图片、表单等行内元素或行内快元素是和文字的基线对齐的，但在实际情况下，我们想让他们中间对齐或底部对齐，这时我们可以设置vertical-align属性

vertical: top|middle|base|bottom

2.解决图片底部默认空白缝隙问题

因为我们的图片默认是和文字的基线对齐的，如若我们给图片加边框，那么图片底部和边框中间会默认留一部分空隙。

解决办法：

  • 设置vertical属性（只要不是base就可以）
  • 把图片转化为块级元素

7.vertical-align属性的更多相关文章

  1. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  2. HTML 标签元素的 align 属性

    align 属性规定段落中文本的对齐方式. 有 left  right center  justify 这些参数 left  right center  就是左对齐 右对齐 中间对齐 justify  ...

  3. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  4. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  5. 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  6. img 的 align 属性

    AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐. AbsMiddle 图像的中间与同一行中最大元素的中间对齐. Baseline 图像的下边缘与第一行文本的下边缘对齐. Bottom ...

  7. delphi Align属性

    ---------------------------------------------- -

  8. 【HTML&CSS】 第二章：标准模式下的页面与怪异模式下的页面区别

    盒模型 前面提到,盒模型(box mode)是浏览器 Quirks Mode 和 Standards Mode 的主要区别. 描述 对于“盒模型”一词并没有明确的文档定义,它是开发人员描述 CSS 中 ...

  9. CSS居中对齐终极指南

    本文首发于我的公众号:前端新世界 欢迎关注 本文将讨论可用于居中对齐元素的6种CSS技术(按照最佳实践排序),以及每一种技术最适合应用的场景.这里,居中对齐指的是将元素放置在其父元素的水平和垂直中心. ...

  10. HTML中的align和valign这两个属性

    转自:https://www.douban.com/note/325833958/ align和valign属性均是规定表格相对于周围元素的对齐方式,区别就在于: 1.align属性趋向于左右对齐,其 ...

随机推荐

  1. JS高阶---作用域面试

    面试题1: ,答案为10 有一点需要明确:作用域是在定义编写代码时已经决定好的 面试题2: 结果1: 结果2: 首先在内部作用域找,没有 然后在全局作用域找,window没有,所以会报错 如果想找对象 ...

  2. Springboot jackSon -序列化-详解

    在项目中有事需要对值为NULL的对象中Field不做序列化输入配置方式如下: [配置类型]: 源码包中的枚举类: public static enum Include { ALWAYS, NON_NU ...

  3. Sring StringBuffer StringBuilder封装类

    Sring StringBuffer StringBuilder封装类 一.String类常见方法的使用 字符串数据都是一个对象 字符串数据一旦初始化就不可以被改变 字符串对象都存储于常量池中,字符串 ...

  4. python json解析字符串出错该如何排查问题

    每天写一点,总有一天我这条咸鱼能变得更咸 python中对于字符串转json格式有专门的json库可以操作 #!/usr/bin/env python # -*- coding: utf-8 -*- ...

  5. Graph Embedding Review：Graph Neural Network(GNN)综述

    作者简介: 吴天龙  香侬科技researcher 公众号(suanfarensheng) 导言 图(graph)是一个非常常用的数据结构,现实世界中很多很多任务可以描述为图问题,比如社交网络,蛋白体 ...

  6. 学习-JVM命令

    jstat jstat (JVM statistics Monitoring)是用于监视虚拟机运行时状态信息的命令,它可以显示出虚拟机进程中的类装载.内存.垃圾收集.JIT编译等运行数据. 格式:js ...

  7. STL——sort函数的实现原理

    实现原理 sort结合了快速排序.堆排序.直接插入排序三种排序方法. 根据不同的数量级别以及不同情况,能自动选用合适的排序方法.当数据量较大时采用快速排序,分段递归.一旦分段后的数据量小于某个阀值,为 ...

  8. 【CFGym102059G】Fascination Street（思维DP）

    点此看题面 大致题意: 有\(n\)个路灯,每个路灯有一定的建造费用,且建成后可照亮自身及周围距离为\(1\)的两个格子.你可以交换\(k\)次两个路灯的建造费用,求照亮所有格子的最小费用. 题意转换 ...

  9. zlib: 不同语言，比如go, php, python 压缩的结果可能不同

    1.这个是实际工作中发现的问题,一边用了go语言对一个文件进行了zlib压缩,然后我用 php 写了个脚本对同一个文件进行zlib压缩,但是生成的两个文件不同,当时一直以为是压缩参数选择错了,后来经过 ...

  10. luogu P5605 小 A 与两位神仙 - 原根

    题目传送门 传送门 Subtask 1 直接模拟. Subtask 2 BSGS算法模板. Subtask 3 考虑模 $m$ 的任意一个原根 $g$. 假设 $g^{ra} \equiv x \pm ...