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

问题点:

在初始化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. 当移动数据分析需求遇到Quick BI

    我叫洞幺,是一名大型婚恋网站“我在这等你”的资深老员工,虽然在公司五六年,还在一线搬砖.“我在这等你”成立15年,目前积累注册用户高达2亿多,在我们网站成功牵手的用户达2千多万.目前我们的公司在CEO ...

  2. web服务发展历程

    PhP发展历史1.php: 开始名字含义:personal home page 个人网页 现在名字含义:HyperText Perprocessor 超文本预处理语言 预处理: 说明PHP是在服务器预 ...

  3. oracle 处理表的一列

    ---删除一列和数据一起删除了. ALTER TABLE 表名 DROP COLUMN 列名; ---添加一列 alert table 表名 add column 列名; ---只删除一列的数据 没有 ...

  4. mysql各个引擎区别

    1.如果你有一个 MyISAM 数据表包含着 FULLTEXT 或 SPATIAL 索引,你将不能把它转换为使用 另一种引擎,因为只有 MyISAM 支持这两种索引. 2. 如果你有一个数据表包含着一 ...

  5. 深入浅出Cocoa 之动态创建类【转】

    在前文<深入浅出Cocoa之类与对象>一文中,我已经详细介绍了ObjC中的 Class 与 Object 的概念,今天我们来如何在运行 时动态创建类.下面这个函数就是应用前面讲到的Clas ...

  6. R语言-组间差异的非参数检验

    R语言-组间差异的非参数检验 7.5 组间差异的非参数检验 如果数据无法满足t检验或ANOVA的参数假设,可以转而使用非参数方法.举例来说,若结果变量在本质上就严重偏倚或呈现有序关系,那么你可能会希望 ...

  7. 异步操作async await

    async函数的特点: 语义化强 里面的await只能在async函数中使用 await后面的语句可以是promise对象.数字.字符串等 async函数返回的是一个Promsie对象 await语句 ...

  8. Directx11教程(52) 实例(instancing)的简单应用

    原文:Directx11教程(52) 实例(instancing)的简单应用 有些时候,我们需要在场景中渲染大量的重复的物体,比如体育场中的观众,森林里面的树木等等,这些物体具有相似的形状,比如很多树 ...

  9. 2019-1-29-jekyll-如何加密博客-防止抓取

    title author date CreateTime categories jekyll 如何加密博客 防止抓取 lindexi 2019-01-29 16:26:17 +0800 2018-2- ...

  10. Notepad++中Python脚本运行出现语法错误:IndentationError: unindent does not match any outer indentation level

    使用Notepad++编辑python代码运行遇到了这个问题: IndentationError: unindent does not match any outer indentation leve ...