在学习开发笔书奇小说网站时，遇到一下问题

问题点：

在初始化CSS中设置了img的padding和margin为0，可是在插入img后，img与父元素仍然有一定间距。

原因分析：

文字图片等inline元素默认与父级元素的baseline对齐，而baseline与父级元素底部是有一定距离的（这个与font-size,font-family的相关设置有关）。给图片或者文字元素添加vertical-align:top或者middle、bottom等可解决该问题。

问题解决代码：

.header-body img{vertical-align: middle;}

原文来源：https://www.5izixue.com/thread-47-1-1.html

html设计时 img与元素存在间距的处理的更多相关文章

  1. 去除inline-block元素间间距的N种方法

    这篇文章发布于 2012年04月24日,星期二,22:38,归类于 css相关. 阅读 147771 次, 今日 52 次 by zhangxinxu from http://www.zhangxin ...

  2. 必须要会的技能（一） 如何实现设计时Binding

    今天我们来分享一个主题:DesignTime Binding设计时绑定. 这一项技术可以使用在所有包括WPF及其衍生出来的技术上,比如Sliverlight,当然也包括UWP 先来说明一下设计时Bin ...

  3. [转]去除inline-block元素间间距的N种方法

    来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子 ...

  4. dt.jar设计时rt.jar运行时

    很多人在初学Java的时候,都要配置环境变量.在配置CLASSPATH的时候,都会加上一个当前目录.,还有两个jar:dt.jar和tools.jar.其实好多人都不了解这两个jar的作用,尤其是dt ...

  5. 去除inline-block元素间间距的N种方法<转>

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  6. 去除inline-block元素间间距的N种方法(转)

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  7. 为什么要提倡"Design Pattern"呢？ 开闭原则 系统设计时，注意对扩展开放，对修改闭合。

    [亲身经历] 无规矩不成方圆 设计模式 - 搜狗百科 https://baike.sogou.com/v123729.htm?fromTitle=设计模式 为什么要提倡"Design Pat ...

  8. 去除inline-block元素间间距的N种方法-zhangxinxu

    张鑫旭原文:点这里进入原文 另外附上大漠老师的如何解决inline-block元素的空白间距地址!!! 去除inline-block元素间间距的N种方法: 一.现象描述 真正意义上的inline-bl ...

  9. wpf设置设计时的ViewModel

    原文:wpf设置设计时的ViewModel wpf mvvm开发中,有些情况下,你的view不一定设置DataContext,但是你又想在设计阶段,能够自动提示你的view绑定的viewmodel的内 ...

随机推荐

  1. 百分比宽度并排元素浮动之后,设置margin,padding换行的问题

    今天遇到一个问题, 如下图,右边的div加了内边距换行: 解决方法: box-sizing: border-box;

  2. NoSQL最新现状和趋势：云NoSQL数据库将成重要增长引擎

    NoSQL最早起源于1998年,但从2009年开始,NoSQL真正开始逐渐兴起和发展.回望历史应该说NoSQL数据库的兴起,完全是十年来伴随互联网技术,大数据数据的兴起和发展,NoSQL在面临大数据场 ...

  3. 解决pycharm新建工程项目都需要重新安装库问题

    在新建一个工程项目后,发现之前安装的库均不在了.想要使用的情况下还得重新安装.这样也太不智能了,一定会有解决的办法.查找相关文档后,发现在新建工程项目的时候需要进行选择是否使用以前的环境. 选择已存在 ...

  4. day1---转自金角大王

    金角大王等待唐僧的日子 Yesterday, when I was young, There were so many songs that waited to be sung. 博客园 首页 新随笔 ...

  5. Leetcode929.Unique Email Addresses独特的电子邮件地址

    每封电子邮件都由一个本地名称和一个域名组成,以 @ 符号分隔. 例如,在 alice@leetcode.com中, alice 是本地名称,而 leetcode.com 是域名. 除了小写字母,这些电 ...

  6. c++进制数转换

    QString result; ]; sprintf(buffer, "0x%x", modelId); return result = buffer;

  7. linux awk命令详解，使用system来内嵌系统命令， awk合并两列

    linux awk命令详解 简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分 ...

  8. Notepad++搜索中的正则应用

    假设要查找文件中所有tppabs="*****" 类型的代码 tppabs="http://www.******.com/templates/Alen/Css/Main. ...

  9. 如何mock https请求

    最近在测试项目过程当中,遇到客户端mock https请求的场景,但是默认用charles抓取出来的https请求是乱码的,对于这类请求如何来mock,有以下2种方式: 1.这里有篇http://co ...

  10. UNP服务器设计范式总结

    一:客户端 本章总结的服务器程序设计范式,使用同一个客户端程序进行测试.个连接.使用的命令如下: client  206.62.226.36  8888  5  500  4000 二:结论 上图测量 ...