html设计时 img与元素存在间距的处理

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

问题点:

在初始化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.cnblogs.com/is-jackwen/p/10926554.html

时间: 2024-08-28 21:51:35

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

开始尝试字体设计时

最初接触AI软件,开始尝试字体设计时,我只会用AI中的矩形工具去设计笔画.矩形笔画是简单的,是直来直去的,简单易操作,不同的笔画形成字形时,非常容易调整和修改,所以在开始阶段,我建议大家尽量不要给自己增加太大的难度,就从最容易的方法起步,就从"矩形造字法"开始. 摘自:<自由"字"在:字体设计与创意> ? 刘兵克 在豆瓣阅读书店查看:https://read.douban.com/ebook/12813783/ 本作品由人民邮电出版社授权豆瓣阅读全球范围

IOS分层架构设计时xcode5.0 Build Phases选项卡 右下角找不到Add Build Phase

在使用XCODE5.0及以后的版本开发基于同工作空间不同工程的分层架构时,静态链接库文件为.a文件,在编译时除了要找到这个.a文件,还要添加它们的.h头文件.打开工程,选择TARGETS-Build Phases,在Xcode5.0版本以前,右下角有一个+按钮,可以直接选择Add Copy Headers项,但5.0版本中没有.可以从菜单中进行选择,如下: IOS分层架构设计时xcode5.0 Build Phases选项卡 右下角找不到Add Build Phase

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

来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="submit" /> 间距就来了~~ 我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题: .space a { display: inline-block; paddi

[转载]DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS 兼容 以下两种方法几乎能解决现今所有兼容

DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性(转载的)

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important;一.CSS 兼容 以下两种方法几乎能解决现今所有兼容.

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

真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距. 方法1:移除空格 <div class="space"> <a href="##"> 哈哈</a><a href="##"> 呵呵</a><a href="##"> 嘻嘻</a> </div> 方法二:借助HTML注释 <div cla

去除inline-block元素间间距

一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="submit" /> 间距就来了~~ 我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题: .space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb;

如何消除inline-block元素间间距问题(转)

一.现象描述    真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="submit" /> 我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题: .space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb; } <

转载&gt;&gt;去除inline-block元素间间距的N种方法《重》

一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="submit" /> 间距就来了~~(正确理解:inline,inlin-block;block) 我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题: .space a { display: inline-block; padding: .5em 1