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

问题点：

在初始化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 精选资源大全

    原文链接  必备品 文档:Documentation API:API Reference 视频:Laracasts 新闻:Laravel News 中文文档 Laravel学院– Laravel 5. ...

  2. Kibana将语言设置为中文

    6.7以后系统开始支持中文了,修改语言只需要添加一行配置即可. 设置方法 在kibana.yml配置文件中添加一行配置 i18n.locale: "zh-CN" 修改后重启,可以看 ...

  3. Quarz框架学习

    参考博客:https://www.cnblogs.com/zhanghaoliang/p/7886110.html

  4. jquery输入框自动提示

    1. 下载jar包:jquery.autocomplete.js 2. 页面内容:<script type="text/javascript" src="../jq ...

  5. buffer的相关小知识

    php与mysql的连接有三种方式,mysql,mysqli,pdo.不管使用哪种方式进行连接,都有使用buffer和不使用buffer的区别. 什么叫使用buffer和不使用buffer呢? 客户端 ...

  6. LeetCode136 Single Number, LeetCode137 Single Number II, LeetCode260 Single Number III

    136. Single Number Given an array of integers, every element appears twice except for one. Find that ...

  7. Python之路,Day1 - Python基础1 --转自金角大王

    本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...

  8. time 与 data time

    >>> import datetime>>> datetime.datetime.now()datetime.datetime(2018, 5, 30, 15, 3 ...

  9. Linux下的python安装

    centos7安装python3 以及tab补全功能   1.安装python3 1.1下载python源码包 网址:https://www.python.org/downloads/release/ ...

  10. GitHub Top 100 Objective-C 项目简介

    主要对当前 GitHub 排名前 100 的项目做一个简单的简介, 方便初学者快速了解到当前 Objective-C 在 GitHub 的情况. 若有任何疑问可通过微博@李锦发联系我 GitHub 地 ...