vertical-align和图片下方空白问题
<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和图片下方空白问题的更多相关文章
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
- 图片下方出现多3px的原因及解决方法
产生原因:主要是因为图片的垂直对齐方式vertical-align引发的,默认值是baseline,默认为此值时图片下方就会多出3px. 解决方案: 1.将图片的垂直对齐方式vertical-alig ...
- javascript焦点图(根据图片下方的小框自动播放)
html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方 <!DOCTYPE html> <html> <head> <meta ...
- css之图片下方定位遮掩层
需要的效果如图,图片下方加个遮掩层: html: <div class="listContent"> <div><img src="imag ...
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- 如何解决div里面img图片下方有空白的问题?
空白产生原因: 图片默认的vertical-align是baseline,(元素放置在父元素的基线上,也就是xx下边距) 一个inline-block元素,如果里面没有inline元素,或者overf ...
- highchart 导出图片, 显示空白
使用highchart时, 导出的图片会变空白.. 解决方案: 不要加载grid.js
- R 语言消除pdf图片的空白
pdf 函数中,有一个参数onefile , 默认值为TRUE, 表示每张图片占用pdf 中的一页 当遇到pdf的前几页为空白时,是因为画图的代码产生了几张空白的图片 如果要消除前面的空白,只需要设 ...
- 在父容器div中图片下方有一条空隙问题
问题:<div><img src="mm1.jpg"></div> 然后,表现就是一张图片呈现,类似下面这样: 恩,看上去很正常,一切都是理所当 ...
随机推荐
- SQL强化练习(面试与学习必备)
一.经典选课题A 1.1.请同时使用GUI手动与SQL指令的形式创建数据库.表并添加数据. 题目:设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教 ...
- 洗礼灵魂,修炼python(78)--全栈项目实战篇(6)—— 多级目录菜单之地址管理系统
相信各位都在在网上买过东西吧?那么今天我的主题就是写个在线购物系统,是不可能的,哈哈(后期确实有这个项目),那么购物都填写过快递地址吧?然后网上查个地址都有地址管理吧? 要求: 1.打印出省.市.县等 ...
- SQL SERVER启动步骤
第一步 从注册表读取SQL SERVER启动信息 (1)Audit Level:设置SQL SERVER是否记录用户登陆信息 Login Mode:设置SQL SERVER登陆类型是只接受windo ...
- MySQL 8.0.11安装配置
官网地址:https://dev.mysql.com/downloads/mysql/ 我这里是RHEL6.5的系统,因此选择RedHat 6 x86,64bit操作系统---下载第一个RPM Bun ...
- Microsoft.AspNet.Identity 重置密码
重置密码:先生成重置密码的Token,然后调用ResetPassword方法重置密码,密码要符合规则.. ApplicationUserManager UserManager => _userM ...
- Tell Me About Yourself - Best Answers and Examples
http://a4academics.com/interview-questions/73-human-resource/723-tell-me-about-yourself?showall=& ...
- 数据挖掘---Numpy的学习
什么是Numpy NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵(任意维度的数据处理),比Python自身的嵌套列表(nested list structure ...
- centos7 下安装Apache2+MariaDB+PHP5过程详解
1.启用Apache2 Centos7默认已经安装httpd服务,只是没有启动.如果你需要全新安装,可以 yum install -y httpd 启动服务:systemctl start httpd ...
- 注入攻击(SQL注入防御)
正确的防御SQL注入 sql注入的防御不是简单只做一些用户输入的escape处理,这样是不够的,只是提高了攻击者的门槛而已,还是不够安全. 例如 mysql_real_escape_string()函 ...
- 关于phpstorm ftp目录乱码
关于IIS FTP服务器汉字文件目录乱码问题:一般来说,IIS 服务器编码默认为GBK,而你的目录可能是UTF-8,将phpstorm的远程连接设置为GBK就OK了.记住服务器的编码,文件的编码要统一