(1-3)line-height与图片的表现

  这篇文章真的很重要,耐心看,重中之重。

一、行高和图片的表现

  图片和行高有什么歪腻呢?? 很多人不明白,为什么我图片好好的放在一个标签里面它就出现了如下问题,

箭头地方的空白处到底哪来的?

因为内联盒模型默认基线对齐的,其中有一个隐藏的文本标签在做遂啦~

看到没!! 和基线对齐了

接下来再做个练习验证一下

看,是不是和我们的标准X的基线重合了,

那么我们有哪些方法来消除这个小问题呢?

  贴出几个大写的方法:

  1、 图片块状化,因为内联盒模型文本对齐怎么影响的到变强的大哥呢

    { img:display:block;}

  2、图片底线对齐

    { img: vertical-align: bottom}

  3、行高足够小-使基线位置上移

    .box { line-height:0;}

当我们知道图片的对齐位置了我们可以做很多事。比如:

---------------------------------------------------------分割线---------------------------------------------------

小编码字找图不易,希望小编的分享能对大家有所启发。大家有不同的意见或建议可以在下面的留言区跟我交流。觉得好可以关注,后续还有继续推文噢~ 

  赞赏小编一个跳跳糖~~~

(1-3)line-height与图片的表现的更多相关文章

  1. C# Selenium with PhantomJSDriver get image width and height (获取图片的长和高)

    //get image width and height var image=driver.FindElement(By.ClassName("it-Header_authorImage&q ...

  2. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  3. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  4. Web性能优化:图片优化

    程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...

  5. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  6. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

  7. 【python】PIL 批量绘制图片矩形框工具

    工具采用PIL:Python Imaging Library,图像处理标准库.PIL功能非常强大,但API却非常简单易用. 安装PIL 在Debian/Ubuntu Linux下直接通过apt安装 $ ...

  8. android图片处理方法

    Java代码 //压缩图片大小 public static Bitmap compressImage(Bitmap image) { ByteArrayOutputStream baos = new ...

  9. Android图片开发内幕--基础篇

    前言:本来我是做电视应用的,但是因为公司要出手机,人员紧张,所以就抽调我去支援一下,谁叫俺是雷锋呢!我做的一个功能就是处理手机中的应用ICON,处理无非就是美化一下,重新与底板进行合成和裁剪,用到了很 ...

随机推荐

  1. Python的__getattribute__二三事

    本来以为自己对__getattribute__已经比较了解了,结果用到的时候,才发现有一些知识点之前一直没有真正弄明白,记录如下(针对python3,python2差异较大): object类有__g ...

  2. 扩大VirtualBox虚拟机磁盘的方法

    之前在VirtualBox里安装了一个XP系统,当时只分配了10G磁盘空间,随着使用,空间不足了. 在虚拟机管理器里不能直接调整磁盘的大小,这里要用到VirtualBox安装目录下的VBoxManag ...

  3. 977 AlvinZH过生日(背包DP大作战S)

    977 AlvinZH过生日 思路 难题.逆推DP. 要明确dp的状态只与是否有选择权有关,而与选择权在谁手里无关.因为不论选择权在谁手里,那个人都会尽可能的获得最大的蛋糕重量. dp[i]表示分配到 ...

  4. 02. css3有哪些新特性?

    2.css3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(t ...

  5. 编写高质量代码:Web前端开发修炼之道(二)

    第四章:高质量的css 1)怪异模式和标准模式 在标准模式中,浏览器根据规范表现页面:而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作. 他们两者之间的差异比较典型的表现在IE对盒模型的解析:在 ...

  6. [Alpha]团队成员贡献分配规则

    设计参考 参考了往届团队sigma_rg.NewTeam.hotcode5.软剑攻城的四个评分规则后,希望该规则能队内减轻竞争的紧张气氛的同时,有具体的评分规则. 分配总则 基础分值固定为30分,将剩 ...

  7. abp部署端口和域名映射配置

    前引 apb部署 后端服务9900端口,域名访问地址是:http://nihao-api.hellow.com: 前端4200端口,域名访问地址是:http://nihao.hellow.com: 前 ...

  8. php中慎用==

    var_dump(' 123fg456'==123);var_dump('some string' == 0);var_dump(123.0 == '123d456');var_dump(0 == & ...

  9. MySQL数据库 InnoDB引擎 事务及行锁总结

    一.事务 1.事务的四大特性 (1)原子性:事务开始后所有的操作要么一起成功,要么一起失败,整个事务是一个不可分割的整体. (2)一致性:是物开始前到结束后,数据库的完整性约束没有被破坏. (3)隔离 ...

  10. vue 2.0创建新项目

    参考链接  https://segmentfault.com/a/1190000011275993 背景在安装完node的基础上,机器什么都没安装参考上述链接 一.下载vue $ cnpm insta ...