(1-3)line-height与图片的表现
(1-3)line-height与图片的表现
这篇文章真的很重要,耐心看,重中之重。
一、行高和图片的表现
图片和行高有什么歪腻呢?? 很多人不明白,为什么我图片好好的放在一个标签里面它就出现了如下问题,
箭头地方的空白处到底哪来的?
因为内联盒模型默认基线对齐的,其中有一个隐藏的文本标签在做遂啦~
看到没!! 和基线对齐了
接下来再做个练习验证一下
看,是不是和我们的标准X的基线重合了,
那么我们有哪些方法来消除这个小问题呢?
贴出几个大写的方法:
1、 图片块状化,因为内联盒模型文本对齐怎么影响的到变强的大哥呢
{ img:display:block;}
2、图片底线对齐
{ img: vertical-align: bottom}
3、行高足够小-使基线位置上移
.box { line-height:0;}
当我们知道图片的对齐位置了我们可以做很多事。比如:
---------------------------------------------------------分割线---------------------------------------------------
小编码字找图不易,希望小编的分享能对大家有所启发。大家有不同的意见或建议可以在下面的留言区跟我交流。觉得好可以关注,后续还有继续推文噢~
赞赏小编一个跳跳糖~~~
(1-3)line-height与图片的表现的更多相关文章
- C# Selenium with PhantomJSDriver get image width and height (获取图片的长和高)
//get image width and height var image=driver.FindElement(By.ClassName("it-Header_authorImage&q ...
- 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
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- Web性能优化:图片优化
程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- height与line-height
1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...
- 【python】PIL 批量绘制图片矩形框工具
工具采用PIL:Python Imaging Library,图像处理标准库.PIL功能非常强大,但API却非常简单易用. 安装PIL 在Debian/Ubuntu Linux下直接通过apt安装 $ ...
- android图片处理方法
Java代码 //压缩图片大小 public static Bitmap compressImage(Bitmap image) { ByteArrayOutputStream baos = new ...
- Android图片开发内幕--基础篇
前言:本来我是做电视应用的,但是因为公司要出手机,人员紧张,所以就抽调我去支援一下,谁叫俺是雷锋呢!我做的一个功能就是处理手机中的应用ICON,处理无非就是美化一下,重新与底板进行合成和裁剪,用到了很 ...
随机推荐
- 洛谷P5156 [USACO18DEC]Sort It Out
这题就是让你求字典序第k小的最短乱序子序列 转换一下,其实就是字典序第k大的最长上升子序列 就统计一下以i结尾的最长上升子序列\(f[i]\),长度为i的上升子序列的开头组成的集合\(v[i]\),转 ...
- rest-assured之验证响应数据(Verifying Response Data)
前面的文章中已经介绍过了如果获得响应数据,接下来我们来介绍一下应该如何来验证这些获得的响应数据,比如验证状态码.状态行.cookies.header.content-type以及body体. 1.验证 ...
- es6 简单封装一个 省市县三级下拉框
废话不多说,直接上效果图和代码: 1,index.js function $(el){ return document.getElementById(el) } let render = Symbol ...
- linux系统管理(1)之 内核编译选项查看
三个方法 proc文件系统 ubunut debain 红帽等 proc文件系统 /proc/config.gz This file shows you the compile-time config ...
- 关于dedecms数据量大以后生成目录缓慢的问题解决
四月份的时候博客被封.我不知情.因为一直很忙,没有来得及看.前两天来看以后,发现居然被封,吓傻了我. 赶紧找原因,原来是转载了某个人的博文,被他举报了,然后就被封了. 觉得很伤心,毕竟这个博客陪伴了我 ...
- Oracle 行列转换函数pivot、unpivot的使用(二)
一.行转列pivot 关键函数pivot,其用法如下 pivot(聚合函数 for 列名 in(类型)) select * from table_name pivot(max(column_name) ...
- iOS开发苹果内购的介绍与实现
1.iOS开发苹果内购的介绍 1.1 介绍 苹果规定,凡是虚拟的物品(例如:QQ音乐的乐币)进行交易时,都必须走苹果的内购通道,苹果要收取大约30%的抽成,所以不允许接入第三方的支付方式(微信.支付宝 ...
- Vmtools的安装步骤
目的:实现win和centos之间的相互复制功能 1.进入centos 2.点击vm菜单的->虚拟机->安装VMware Tools 3.centos会出现一个vm的安装包 4.将文件移动 ...
- 学习python 3 入门知识
1.安装 http://www.runoob.com/python3/python3-install.html https://www.python.org/ 2.使用 工具一:IDLE IDLE 是 ...
- jmeter安装部署、maven路径配置
jmeter下载地址: https://jmeter.apache.org/download_jmeter.cgi 解压文件 配置jmeter环境变量 (1)设置jmeter解压目录的JMETER_H ...