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

问题点：

在初始化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. Laravel 批量替换某个字段

    Likeword::offset(16854)->chunk(100, function ($word_list) { foreach ($word_list as $word) { $new ...

  2. CentOS8/RHEL8--恢复root用户密码及简易加固GRUB

    CentOS8/RHEL8--简易加固GRUB 今天突然想到放在数据中心的虚拟化平台下的Linux服务器,都是采用默认方式安装的,没有设置太多的安全选项,如果有恶意用户重启服务器后,通过GRUB调整启 ...

  3. 总体<导学>

    有一些奇奇怪怪的数据集 波士顿房价数据集 使用sklearn.datasers.load_boston 加载相关的数据集 重要参数 return_X_y 表示是否返回target (价格) 默认为Fa ...

  4. Python数据分析与展示[第二周]

    matplotlib 有各种可视化的类构成 一般调用 matplotlib.pypolt 这个命令字库 相当于快捷方式 plt.plot(a) 只有一个一维列表 x轴充当列表索引 plt.ylabel ...

  5. 云服务器 ECS Linux Web 环境配置站点的方法

    摘自:https://help.aliyun.com/knowledge_detail/41100.html ECS Linux 系统一键安装 Web 环境<专业版>下 Tomcat 添加 ...

  6. 并发模式与 RPS 模式之争，性能压测领域的星球大战

    本文是<如何做好性能压测>系列专题分享的第四期,该专题将从性能压测的设计.实现.执行.监控.问题定位和分析.应用场景等多个纬度对性能压测的全过程进行拆解,以帮助大家构建完整的性能压测的理论 ...

  7. laravel 分页带参数

    {{$data->appends(request()->except(['page']))->links()}}

  8. java memory allocation（转）

    Java的运行时数据存储机制 Java程序在运行时需要为一系列的值或者对象分配内存,这些值都存在什么地方?用什么样的数据结构存储?这些数据结构有什么特点?本文试图说明此命题的皮毛之皮毛. 概念   对 ...

  9. python 正确地初始化对象

  10. 【转】Sprague-Grundy函数

    http://www.cnitblog.com/weiweibbs/articles/42735.html 上一期的文章里我们仔细研究了Nim游戏,并且了解了找出必胜策略的方法.但如果把Nim的规则略 ...