(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. 海思hi35xx 开发学习(2):系统控制

    应用程序启动 MPP 业务前,必须完成 MPP 系统初始化工作.同理,应用程序退出MPP 业务后,也要完成 MPP 系统去初始化工作,释放资源. 视频缓存池 一组大小相同.物理地址连续的缓存块组成一个 ...

  2. SQL的CharIndex用法

    和C#一样判断一个字符串中是否包含另一个字符串举例1:select charindex('test','This Test is test!!')->返回 6 (空格也算一个 下标从1开始)2: ...

  3. linux下普通用户添加 sudo 免密码

    在使用普通用户登录的时候,会经常使用sudo指令执行一些操作,有时候感觉输入密码比较繁琐,特别是需要设置一些开机启动的时候操作,而这些操作往往就需要sudo指令,如果没有免密的话,在使用普通用户登录的 ...

  4. Python取时间,日期的总结

    import datetime from datetime import timedelta now = datetime.datetime.now() #今天 today = now #昨天 yes ...

  5. Java基础29-子父类中的成员变量

    /* 成员: 1.成员变量 2.函数 3.构造函数 变量: this 代表当前对象的引用 this.变量 首先在本类中找所需要的变量,如果没有找到再父类中找. super 用于访问当前对象的父类成员, ...

  6. Oracle 数据库名、实例名、Oracle_SID

    本文参考自ORACLE 数据库名.实例名.ORACLE_SID的区别,纯属读书笔记,加深记忆 在ORACLE7.8数据库中只有数据库名(db_name)和数据库实例名(instance_name).在 ...

  7. 2019第九届MathorCup数学建模

    题目下载:https://www.lanzous.com/i3taz2j 总共四个问题 问题1 首先附件一中的数据,拿到后肯定感觉棘手.我们的处理方法: 在下面缺失数据的地方我们都认为是问题3中的预测 ...

  8. Monkey入门之如何在android虚拟机中安装apk包

    如果想把公司的产品apk包安装到android虚拟机中,应该进行如下操作: 1.首先将apk包放到C:\Program Files\Android\android-sdk\platform-tools ...

  9. OC SEL (@selector) 原理及使用总结(转)

    SEL 类成员方法的指针 可以理解 @selector()就是取类方法的编号,他的行为基本可以等同C语言的中函数指针,只不过C语言中,可以把函数名直接赋给一个函数指针,而Object-C的类不能直接应 ...

  10. spring自定义标签之 规范定义XSD

    引言: spring的配置文件中,一切的标签都是spring定义好的.<bean/>等等,有了定义的规范,才能让用户填写的正常可用.想写自定义标签,但首先需要了解XML Schema De ...