开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >div包裹img时div高度高于img的解决办法

div包裹img时div高度高于img的解决办法

飞奔去旅行

发布于 2019-06-13 08:47:58

发布于 2019-06-13 08:47:58

4K00

代码可运行

举报

文章被收录于专栏：智慧协同智慧协同

运行总次数：0

代码可运行

代码如下：

<div>
    <img src=''" style="width: 36px; height: 36px;">
</div>

现象如下：

image.png

可以看得出，红框里的圆形头像距离底部有一定的距离。

解决办法：

img { display:block; } or img { vertical-align:bottom; }

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017.09.02 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

CSS进阶内容——布局技巧和细节修饰

display hidden overflow visibility webkit

我们在之前的文章中已经掌握了CSS的大部分内容，但仍有一些内容我们没有涉略，这篇文章就是为了补充前面没有涉及的内容，为我们的知识做出补充并且介绍一些布局技巧

秋落雨微凉

2022/10/25

2K0

CSS进阶内容——布局技巧和细节修饰

移动端常用适配方案三

2023腾讯·技术创作特训营第二期

在前面的, 移动端常用适配方案二有一个弊端那么就是如果有多少套适配窗口就需要编写多少个媒体查询，如果有几百个那么就编写几百个那么不是疯了嘛，那么本文主要介绍的就是更好的解决方案的方式，就是通过 JS 来进行设置, 通过 JS 动态计算当前屏幕每一份大小的好处, 不用写很多的媒体查询, 坏处：切换了屏幕尺寸之后需要刷新界面才有效，而媒体查询如果切换了屏幕的尺寸不需要重新刷新界面，在真实的情况下用户使用的可都是真机，就不会出现不同适配窗口之间的切换问题啦。

程序员NEO

2023/09/28

1700

一个简单的卡动车排队系统

一、效果图 image.png image.png 二、代码 1、admin.html <html> <head> <meta charset="UTF-8"> <title>卡丁车</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <sty

week

2018/08/27

2740

个人电影网站web网页设计制作—— 影视公司5页 DIV+CSS制作浮动布局

javascript html css jquery java

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 --- @TOC 一、网页介绍 1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。 2.网页编辑：网页作品代码简单，可使用任意HTML编

IT司马青衫

2022/08/14

3K0

个人电影网站web网页设计制作—— 影视公司5页 DIV+CSS制作浮动布局

实现div里的img图片水平垂直居中

https java 网络安全

方法一：将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。

全栈程序员站长

2022/08/22

3.3K0

实现div里的img图片水平垂直居中

IMG图片下面出现下边距的解决办法

block display ps size text

在不同浏览器下图片下面会出现莫名的下边距，经测算在FF中下边距大概是多出了3像素左右，而IE6更多，在IE8中展示却是完好的，以往的做法只需要将img定义为块状级就解决了问题；

爱知汇

2020/10/10

7250

IMG图片下面出现下边距的解决办法

基于HTML电商项目的设计与实现—— HTML+CSS+JavaScrip家具网页设计实例企业网站制作

javascript html css jquery java

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 --- <font

IT司马青衫

2022/08/16

8760

基于HTML电商项目的设计与实现—— HTML+CSS+JavaScrip家具网页设计实例企业网站制作

7b2美化-首页添加导航会员区块

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

小狐狸说事

2022/11/17

8010

原生js实现图片单张上传及批量上传

<meta name="viewport" content="width=device-width, initial-scale=1.0">

马克社区

2022/07/19

7.4K0

原生js实现图片单张上传及批量上传

关于 vertical-align 你应该知道的一切

vertical-align，写过 CSS 的朋友们肯定都知道这个属性的作用，顾名思义，垂直对齐，主要目的用于将相邻的文本与元素对齐。MDN 中对它的定义如下：

政采云前端团队

2020/03/19

2.9K0

关于 vertical-align 你应该知道的一切

CSS中的vertical-align跟line-height相互作用

其中，有个属性值暴露了vertical-align和line-height之间的基友关系，大家猜猜看是哪个属性值？

javascript.shop

2019/09/04

9120

CSS中的vertical-align跟line-height相互作用

第13天：页面布局实例-博雅主页

今天写了个简单的页面，再熟悉了一下div+css布局，写的还可以，以后还要多练习。此外还进一步学习了定位相关知识。

半指温柔乐

2018/09/11

6360

第13天：页面布局实例-博雅主页

右侧悬浮菜单悬浮窗 css+html css自动判断PC显示手机端隐藏

感觉还不错，只是部署到博客不太搭配（颜色太鲜艳了），用css加了个设备判断，电脑端显示、手机端隐藏。1221px 界点

AlexTao

2019/12/19

3.5K0

【CSS】处理兼容性问题 | CSS Hack | IE

css padding width 对象浏览器

（1）IE6双边距bug: 块属性标签添加了浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。这种问题主要就是会把某些元素挤到了第二行。

前端修罗场

2023/10/07

2890

解决img父元素高度多出3px

结果运行之后发现，不管是在移动端还是pc端，都会出现这种问题。刚开始以为是父元素初始化了margin和padding的原因，排查css无果，又怀疑是html空格的原因，把html改成

csxiaoyao

2019/02/15

1.4K0

css属性及定位操作

container display overflow padding position

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

全栈程序员站长

2022/07/21

2.6K0

【web课程设计】HTML+CSS仿QQ音乐网站

javascript html java css jquery

](https://blog.csdn.net/bigwhiteshark/category_11924503.html)

IT司马青衫

2022/08/11

1.1K0

【web课程设计】HTML+CSS仿QQ音乐网站

CSS常见兼容性问题总结

浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。

书童小二

2018/09/03

1.2K0

利用vertical-align:middle实现在整个页面居中

如果想让一个div或一张图片相对于整个页面居中，用vertical-align:middle可以很简单地解决。

跟着阿笨一起玩NET

2018/09/20

1.5K0

利用vertical-align:middle实现在整个页面居中

CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

本文介绍了前端性能优化中的垂直居中方案，包括使用Flexbox、Grid、CSS3进行垂直居中，以及使用定位和Transform进行垂直居中。同时，还介绍了如何通过代码拆分、懒加载和图片自适应来提高页面性能。最后，给出了一组示例和代码。

张果

2018/01/04

3.9K0

CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

相关推荐

CSS进阶内容——布局技巧和细节修饰

更多 >

飞奔去旅行0

LV.1

这个人很懒，什么都没有留下～

作者相关精选

换一批

加入讨论

的问答专区 >

架构师之路0

1技术VP擅长5个领域

相关课程

一站式学习中心 >

腾讯云向量数据库-RAG七天入门训练营

向量数据库

腾讯云安灯

Python教程-Django框架快速入门到实战

💥开发者 MCP广场重磅上线！

精选全网热门MCP server，让你的AI更好用 🚀

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验