<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. coTurn 运行在Windows平台的方法及服务与客户端运行交互流程和原理

    coTurn是一个开源的STUN和TURN及ICE服务项目,只是不支持Windows.为了在window平台上使用coTurn源码,需要在windows平台下安装Cygwin环境,并编译coTurn源 ...

  2. 大杀器:VS2017 查看或调试liunx代码(转载)

    From:https://blog.csdn.net/mumufan05/article/details/80094637 上一篇简单介绍了vs2017新建一个linux的工程,本编将介绍一下如何管理 ...

  3. Vue2 学习笔记1

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...

  4. SQLServer2016 AlwaysOn AG基于工作组的搭建笔记

    最近搭建了一套SQLServer2016 AlwaysOn AG. (后记:经实际测试,使用SQLServer2012 也同样可以在Winserver2016上搭建基于工作组的AlwaysOn AG, ...

  5. Android长时间定时任务实现

    在服务的onStartCommand方法里面使用AlarmManager 定时唤醒发送广播,在广播里面启动服务 每次执行startService方法启动服务都会执行onStartCommand 1.服 ...

  6. Turtle绘制带颜色和字体的图形(Python3)

    转载自https://blog.csdn.net/wumenglu1018/article/details/78184930 在Python中有很多编写图形程序的方法,一个简单的启动图形化程序设计的方 ...

  7. 对flexbox伸缩概念的深入浅出解释

    flex布局最难理解的,就是剩余空间和伸缩概念了,此文很好的作了解释: https://www.cnblogs.com/ghfjj/p/6529733.html 转自:http://zhoon.git ...

  8. angular5 组件通信(一)

    用了两年angular1,对1的组件通信比较熟练,最直接的就是直接使用scope的父子节点scope就可以实现,且基本都是基于作用域实现的通信:还有就是emit,broadcast,on这几个东西了. ...

  9. pip自动生成和安装requirements.txt

    生成requirements.txt文件 pip freeze > requirements.txt 安装requirements.txt依赖 pip install -r requiremen ...

  10. https验证证书的三个级别

    一.无条件信任证书 1. func urlSession(_ session: URLSession, didReceive challenge: URLAuthenticationChallenge ...