<style>
    .box1,.box2{
      display: inline-block;
      background-color:#f0f3f9;
      width:150px;
      height: 150px;
    }
  </style>

  <div class="content">
    <span class="box1"></span>
    <span class="box2"></span>
  </div>

两个盒子都没有内容时,能在一条水平线上

<div class="content">
    <span class="box1"></span>
    <span class="box2">x-baseline</span>
  </div>

当第二个盒子有text内容时,两个盒子无法对齐。

一个inline-block元素,如果里面没有inline元素,或者overflow不是visible,则该元素的基线就是其margin底边缘,否则,其基线就是元素里面最后一行内联元素的基线。

box1里面没有内联元素,因此,基线就是容器的margin下边缘,也就是下边框下面的位置;而第二个框框里面有字符,纯正的内联元素,因此,box2的基线就是这些字符的基线,也就是字母x的下边缘了。于是,我们就看到了box1下边缘和box2里面字符x底边对齐的好戏。

说回vertical-align

vertical-align默认值是baseline, 也就是基线对齐。而基线是什么,基线就是字母X的下边缘。

经常碰到问题div里包含图片,父级没有指定高度的时候,图片下方有几个像素空白

<div class="content">
    <img src=".picc.png" alt="">
  </div>

    .content{
      width: 100%;
      background: blue;
    }
    .content img{
      width: 300px;
      height: 300px;
    }

原因图片的display属性默认是inline,而这个属性的vertical-align的默认值是baseline(基线)。所以就会出现上图的情况(图片底部出现一个小留白区域)。

解决方法

1.图片转为块元素  因为只有元素属于inline或是inline-block ,vertical-align属性才会起作用。

img{display:block;}

2.图片对其方式改为中间对齐

img{vertical-align:middle;}

3.父级设置font-size:0   改变行高

4.父级设置line-height:0 改变行高

5.图片转为浮动

img{float:left;}

vertical-align属性

vertical-align: baseline;    /*默认。元素放置在父元素的基线上*/
vertical-align: sub;         /*垂直对齐文本的下标*/
vertical-align: super;       /*垂直对齐文本的上标*/
vertical-align: text-top;    /*把元素的顶端与父元素字体的顶端对齐*/
vertical-align: text-bottom; /*把元素的底端与父元素字体的底端对齐。*/
vertical-align: middle;      /*把此元素放置在父元素的中部*/
vertical-align: top;         /*把元素的顶端与行中最高元素的顶端对齐*/
vertical-align: bottom;      /*把元素的顶端与行中最低的元素的顶端对齐*/

vertical-align和图片下方空白问题的更多相关文章

  1. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  2. 图片下方出现多3px的原因及解决方法

    产生原因:主要是因为图片的垂直对齐方式vertical-align引发的,默认值是baseline,默认为此值时图片下方就会多出3px. 解决方案: 1.将图片的垂直对齐方式vertical-alig ...

  3. javascript焦点图(根据图片下方的小框自动播放)

    html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方 <!DOCTYPE html> <html> <head> <meta ...

  4. css之图片下方定位遮掩层

    需要的效果如图,图片下方加个遮掩层: html: <div class="listContent"> <div><img src="imag ...

  5. What is Vertical Align?

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

  6. 如何解决div里面img图片下方有空白的问题?

    空白产生原因: 图片默认的vertical-align是baseline,(元素放置在父元素的基线上,也就是xx下边距) 一个inline-block元素,如果里面没有inline元素,或者overf ...

  7. highchart 导出图片, 显示空白

    使用highchart时, 导出的图片会变空白..   解决方案: 不要加载grid.js

  8. R 语言消除pdf图片的空白

    pdf 函数中,有一个参数onefile ,  默认值为TRUE, 表示每张图片占用pdf 中的一页 当遇到pdf的前几页为空白时,是因为画图的代码产生了几张空白的图片 如果要消除前面的空白,只需要设 ...

  9. 在父容器div中图片下方有一条空隙问题

    问题:<div><img src="mm1.jpg"></div> 然后,表现就是一张图片呈现,类似下面这样: 恩,看上去很正常,一切都是理所当 ...

随机推荐

  1. SQL强化练习(面试与学习必备)

    一.经典选课题A 1.1.请同时使用GUI手动与SQL指令的形式创建数据库.表并添加数据. 题目:设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教 ...

  2. 洗礼灵魂,修炼python(78)--全栈项目实战篇(6)—— 多级目录菜单之地址管理系统

    相信各位都在在网上买过东西吧?那么今天我的主题就是写个在线购物系统,是不可能的,哈哈(后期确实有这个项目),那么购物都填写过快递地址吧?然后网上查个地址都有地址管理吧? 要求: 1.打印出省.市.县等 ...

  3. SQL SERVER启动步骤

    第一步 从注册表读取SQL SERVER启动信息 (1)Audit  Level:设置SQL SERVER是否记录用户登陆信息 Login Mode:设置SQL SERVER登陆类型是只接受windo ...

  4. MySQL 8.0.11安装配置

    官网地址:https://dev.mysql.com/downloads/mysql/ 我这里是RHEL6.5的系统,因此选择RedHat 6 x86,64bit操作系统---下载第一个RPM Bun ...

  5. Microsoft.AspNet.Identity 重置密码

    重置密码:先生成重置密码的Token,然后调用ResetPassword方法重置密码,密码要符合规则.. ApplicationUserManager UserManager => _userM ...

  6. Tell Me About Yourself - Best Answers and Examples

    http://a4academics.com/interview-questions/73-human-resource/723-tell-me-about-yourself?showall=& ...

  7. 数据挖掘---Numpy的学习

    什么是Numpy NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵(任意维度的数据处理),比Python自身的嵌套列表(nested list structure ...

  8. centos7 下安装Apache2+MariaDB+PHP5过程详解

    1.启用Apache2 Centos7默认已经安装httpd服务,只是没有启动.如果你需要全新安装,可以 yum install -y httpd 启动服务:systemctl start httpd ...

  9. 注入攻击(SQL注入防御)

    正确的防御SQL注入 sql注入的防御不是简单只做一些用户输入的escape处理,这样是不够的,只是提高了攻击者的门槛而已,还是不够安全. 例如 mysql_real_escape_string()函 ...

  10. 关于phpstorm ftp目录乱码

    关于IIS FTP服务器汉字文件目录乱码问题:一般来说,IIS 服务器编码默认为GBK,而你的目录可能是UTF-8,将phpstorm的远程连接设置为GBK就OK了.记住服务器的编码,文件的编码要统一