像这种很常见的字体旁边带图标的,很多都是用em的background去实现。

<li><em class="wx"></em><a href="">微信登陆</a></li>

.nav-top .wx{background: url(images/wx.png) no-repeat;padding: 1px 11px;}

刚开始没设padding,图标死活不出来。据yuge的说法,em是空的,padding为它里面设置了间距,所以有空间显示图片。

而且如果把em放到a里面,就算设了padding图标还是不显示,要把a设为a{display: inline-block;},图标才能显示。block会独占一行,能设宽高,inline是多个元素在一行,设宽高无效,inline-block就是能多个div在一行,而且inline-block水平呈现的元素间,换行符或空格分隔的情况下都会使两个块间有间距。

用em包图片记的更多相关文章

  1. [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

    我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在we ...

  2. 【maven 】jar包冲突-记一次冲突解决

    方法一:根据mvn提示一个一个排除 1.请到pom.xml文件所在的目录(包含父子目录)下分别执行下面的命令排查是什么原因导致fastjson版本不正确: mvn dependency:tree -D ...

  3. Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放

    UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,基于MIT协议,功能很强大.最近在使用的过程中发现其中上传的图片(或者插入已有的表情包图 ...

  4. java 上传图片 并压缩图片大小

    Thumbnailator 是一个优秀的图片处理的Google开源Java类库.处理效果远比Java API的好.从API提供现有的图像文件和图像对象的类中简化了处理过程,两三行代码就能够从现有图片生 ...

  5. 四:Java使用google的thumbnailator工具对图片压缩水印等做处理

    Thumbnailator是一个非常好的图片开源工具 使用方法: 在pom中加入以下jar包 <!-- 图片缩略图 图片压缩 水印 start--> <dependency>& ...

  6. java 上传图片 并压缩图片大小(转)

    Thumbnailator 是一个优秀的图片处理的Google开源Java类库.处理效果远比Java API的好.从API提供现有的图像文件和图像对象的类中简化了处理过程,两三行代码就能够从现有图片生 ...

  7. 一次httpserver优化的经验和教训(silverlight游戏 - 金庸群侠传X0.5上线记)

    金X因为被推荐到ACFUN游戏排行第一名.并同一时候在17YY.7K7K.U77.17173等各大小游戏站点上线.迎来了在线用户数量的爆炸式增长.眼下各大站点使用外链方式.也就是实际链接到金X官网的s ...

  8. WordPress 使用本地化的 emoji 表情包

    WordPress 结合使用 Native Emoji 和 WP Local Emoji 两个插件,可以达到使用本地化的 emoji 表情包的目的. 安装好上述两个插件并且启用: 为了使 Native ...

  9. java上传图片并压缩图片大小

    Thumbnailator 是一个优秀的图片处理的Google开源Java类库.处理效果远比Java API的好.从API提供现有的图像文件和图像对象的类中简化了处理过程,两三行代码就能够从现有图片生 ...

随机推荐

  1. DropDMG for Mac(dmg 文件打包工具)破解版安装

    1.软件简介    DropDMG 是 macOS 系统上的一款帮助用户快速打包 DMG 文件的 Mac 文件管理软件,DropDMG 不但可以将影像档加密.更可以配合 GZip .BZip2 .Ma ...

  2. swoole+Redis实现实时数据推送

    <?php /** * *************************************** * 单进程保护 * * ********************************* ...

  3. 9.12 翻译系列:数据注解特性之ConcurrencyCheck【EF 6 Code-First系列】

    原文链接:https://www.entityframeworktutorial.net/code-first/concurrencycheck-dataannotations-attribute-i ...

  4. android应用私有存储文件的写入与读取-openFileInput 和 openFileOutput

    一:第一种方式就是像Java平台下的实现方式一样通过构造器直接创建,如果需要向打开的文件末尾写入数据,可以通过使用构造器FileOutputStream(File file, boolean appe ...

  5. Atitit 项目文档规范化与必备文档与推荐文档列表

    Atitit 项目文档规范化与必备文档与推荐文档列表 ===========比较重要的必备文档========== 项目组名单通讯录( 包括项目组,客户沟通人等 需求文档 原型ui文档 开发计划表 项 ...

  6. css font-family常用的黑体宋体等字体中英文对照

    资料来源: https://www.cnblogs.com/EnSnail/p/6792853.html 在实现网页效果时,细节很重要,字体也不例外,CSS:font-family常用字体中英文对照如 ...

  7. headfirst python 03, 04

    文件与异常 python中的输入机制是基于行的, open()函数与for 语句结合使用, 可以非常容易的读取文件.(打开->处理->关闭) #!/usr/bin/env python # ...

  8. 浅析C#中的结构体和类

    类和结构是 .NET Framework 中的常规类型系统的两种基本构造. 两者在本质上都属于数据结构.封装着一组总体作为一个逻辑单位的数据和行为. 数据和行为是该类或结构的"成员" ...

  9. java.lang.ClassCastException: net.sf.ezmorph.bean.MorphDynaBean cannot be cast to

    Java.lang.ClassCastException: net.sf.ezmorph.bean.MorphDynaBean cannot be cast to 在使用JSONObject.toBe ...

  10. nginx负载均衡二:配置

    配置方法一(可用): upstream tomcatserver1 { server ; server 192.168.70.172; server 192.168.70.173 down; serv ...