h5中 <!DOCTYPE html>标签问题，div里面如果装有一个img下边会有2px间隙

最新推荐文章于 2025-04-01 14:40:57 发布
翻译 最新推荐文章于 2025-04-01 14:40:57 发布 · 2.6k 阅读 · 4
文章标签：

#html #标签 #浏览器 #标准

本文探讨了HTML中图片下方出现神秘空隙的原因，并提供了三种解决方案：调整父级div的line-height或font-size属性；设置img标签的display属性为block或使用vertical-align属性；以及通过浮动img的父元素。

这里写图片描述

问题原因在于：

浏览器并没有所谓的”HTML 5 模式”，而是
只有三种：怪异模式(Quirks)，几乎标准的模式(Limited Quirks)和标准模式(Standards)，其中几乎标准的模式和标准模式之间的唯一差异在于是否对元素给定行高(line-height)和基线(baseline)。几乎标准模式中，如果标签所在行没有其他的行内元素，将不指定基线(baseline)，标签因此会紧贴着父元素底部。在标准模式中，行框总是会包含类似字母”g”，”f”尾巴下伸出来的那一部分空间(针对下行字母)，即使行框内并没有任何内容。因此这种情况下你看到的跟父元素底部几个像素的间隙实际上就是为”字母尾巴“预留的。

解决的方法：

1、可以设置img的父级div的line-height:0 或者font-size：0；
2、设置img为display：block 或者设置vertical-align：middle；
3、也可以设置img父元素为浮动

HTML贪吃蛇游戏
weixin_65477256的博客
09-15 2705
贪吃蛇是一款经典的休闲益智游戏。本文将通过HTML5和JavaScript详细解析如何实现一个简易版的贪吃蛇游戏。游戏的主要逻辑包括蛇的移动、碰撞检测、食物生成等功能。以下是游戏的完整代码及注释解析。（纯属好玩）
HTML入门02
weixin_41468241的博客
01-19 4214
a>2、双标签：h1-h6、div、文本颜色、p段落、a、ul li。5、锚点？如：div、ol、ul、li、dl、dt、dd、h1-h6。4、
HTML5 ＜!DOCTYPE＞ 标签
thgj0006的博客
03-31 1388
DOCTYPE> 声明位于文档中的最前面的位置，处于 标签之前。DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。在 HTML 4.01 中， 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。
h5-div内img会多2px间隙
weixin_45543743的博客
08-19 1056
div内img会多2px间隙 现象：h5中 标签问题，div里面如果装有一个img下边会有2px间隙 <div class="div"> <img class="img" src="https://upload-images.jianshu.io/upload_images/19298013-e4177135faba11ce.jpg?imageMogr2/auto-o...
div内img多2像素问题
青天诀的专栏
08-21 553
div内img会多2px间隙div里面如果装有一个img下边会有2px间隙1<divclass="div"> 2<imgclass="img...
H5：消除div里面img的缝隙
KWMax
02-21 612
当我们将img标签放于div中，仔细查看会发现img底部和div底部有一道很小的缝隙。 那么如何解决这个问题呢？ 三种方式： 1、定义容器里的字体大小为0 2、图片img标签display:block 3、定义图片img标签vertical-align:bottom或vertical-align:middle或vertical-align:top 原因： ...
html div img a
weixin_45922023的博客
02-26 659
前端课程学习笔记 lessons1-4 1.html的所有东西 都称为标签 1.1 标签以两种形式编写 <标签名> <标签名></标签名> 1.2 一个标准的html文档结构如下 <!doctype html> ：告诉浏览器以下为html文档 标签html ：文件本身 标签head ：文件头部(前缀) 标签body ：文件身体(内容) <!doctype html> <html> <head>
母亲节祝福html源码示例
Dalao_zzl的博客
05-12 5176
创建一个完整的HTML页面，我可以为您提供一个简单的HTML模板，其中包含一些示例性的祝福语，并添加一些注释以帮助您理解如何扩展内容。标签内添加更多的祝福语，请注意，由于这是一个简单的示例，您可能需要根据自己的需求进行调整和扩展。这个HTML模板包含一个简单的页面布局，用于向母亲表达节日的祝福。
html实现手势密码
weixin_68658847的博客
04-01 2155
html实现手势密码
【标题】写一个2048小游戏
2302_81218205的博客
01-12 3956
好的，下面是一个完整的2048游戏的HTML代码示例，包括HTML、CSS和JavaScript部分。你可以将这三段代码保存在同一个文件夹中，打开HTML运行。• 打开一个文本编辑器，例如Notepad++、Sublime Text、Visual Studio Code等。• 将文件保存为`index.html`。• 将文件保存为`styles.css`。3.创建JavaScript文件。1.创建HTML文件。
h5的div布局问题
LvandDuan的博客
09-14 3068
1、div的高度自适应问题： 通过JS实现高度按比例的呈现在整个布局，函数如下： function rfresizeHeight(domid,xwidth,xheight){ var rate=xheight/xwidth; var heightshouldbe=($("#"+domid).width())*rate; $("#"+domid).css("height",
动态修改页面的DOCTYPE及一个小发现
weixin_33709590的博客
02-05 132
    在实现新的Skin-Paperclip的时候，页面DOCTYPE需要使用：     &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;     可其他的Skin使用的都是： &lt;...
手机端h5页面，消除行内块级元素(inline-block)间距的有效办法
weixin_37861326的博客
05-29 2478
博主在做项目的时候，遇到行内块级元素因为换行带来的间隙的问题。在PC端时，使用父级元素添加样式：letter-spacing:-0.5em，直接子代元素添加样式：letter-spacing:normal；可以很容易的解决间隙带来的问题，但是在手机端采用通用的方式，并没有生效。经过多种方法比对之后，最有效的办法如下：// 父级元素标签，添加样式 font-size: 0;保险起见，额外再加上let...
HTML5 之 Img 标签
热门推荐
无
09-09 1万+
概述   img 用于将图片嵌入文档。   img是行内单标签元素，同时img也是可替换元素（可修改宽高）。 可替换元素   HTML元素可分为可替换元素和不可替换元素，详细参考。   绝大多数的HTML元素都是不可替换元素，其内容由DOM内容决定。例如<p>hello world</p>，展示的内容就是文本节点hello world。   而对于可替换元素，其内容则由元素的标签和属性决定。例如<img>元素的内容实际是由src属性读取的图片的原始宽高来确定的。   典.
HTML5的img标签浅谈
xiaoweids的博客
06-16 1044
img> 标签定义 HTML 页面中的图像。 标签有两个必需的属性：src 和 alt。从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。 标签的作用是为被引用的图像创建占位符。通过在 标签中嵌套 标签，给图像添加到另一个文档的链接。
H5 img图片标签及其属性
qq_42467563的博客
10-16 1万+
img：图片(重点) src：图片资源位置 相对目录 .表示当前目录 ..表示上一级目录 绝对目录 window：以盘符开头的目录 类unix：以/开头的目录 width：宽度 height：高度，只设置高度时，宽度会等比缩放，两个都设置时会进行拉伸或压...
HTML5 ＜img＞ 标签
thgj0006的博客
04-13 1436
img> 标签定义 HTML 页面中的图像。 标签有两个必需的属性：src 和 alt。从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。 标签的作用是为被引用的图像创建占位符。通过在 标签中嵌套 标签，给图像添加到另一个文档的链接。
H5以＜img /＞标签为父标签效果
weixin_45876059的博客
11-30 488
html5中无法直接以img标签作为父标签定位，但是可以使用flex布局制作成与以img标签为父标签一样的效果。
H5：图像标签和路径
Cosophia的博客
03-02 604
本篇介绍有关标签和路径，关于图像标签我们来看看有什么需要注意的。看完之后希望对你有所帮助，记得多加尝试，实践出真知。
<!DOCTYPE html> <html> <head> <style> .heart { position: relative;
最新发布
11-10
HTML负责网站的内容，CSS负责样式化HTML内容，要分析和优化包含HTML文档声明及定义`.heart`样式类的HTML和CSS代码，先给出一个示例代码，之后进行分析和优化。 ### 示例代码 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Heart Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="heart"></div> </body> </html> ``` ```css /* styles.css */ .heart { width: 100px; height: 100px; background-color: red; } ``` ### 代码分析 - **HTML部分**： - 文档声明`<!DOCTYPE html>`指明这是一个HTML5文档。 - `<html>`标签是HTML文档的根标签，`lang="en"`表示文档语言为英语。 - `<head>`部分包含字符编码设置`<meta charset="UTF-8">`、页面标题`<title>`和外部CSS文件引用`<link>`。 - `<body>`中使用了一个`<div>`元素，并应用了`.heart`样式类。 - **CSS部分**： - `.heart`样式类设置了元素的宽度、高度和背景颜色。 ### 代码优化 - **HTML部分**：可以添加更多语义化标签，提升代码的可访问性和搜索引擎优化（SEO）效果。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Heart Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <main> <div class="heart"></div> </main> </body> </html> ``` - **CSS部分**：可以使用CSS伪元素来创建真正的心形，并且添加动画效果。 ```css /* styles.css */ .heart { position: relative; width: 100px; height: 90px; margin-top: 100px; animation: heartbeat 1.5s ease-in-out infinite both; } .heart::before, .heart::after { content: ""; position: absolute; top: 0; width: 52px; height: 80px; border-radius: 50px 50px 0 0; background: red; } .heart::before { left: 50px; transform: rotate(-45deg); transform-origin: 0 100%; } .heart::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes heartbeat { from { transform: scale(1); transform-origin: center center; animation-timing-function: ease-out; } 10% { transform: scale(0.91); animation-timing-function: ease-in; } 17% { transform: scale(0.98); animation-timing-function: ease-out; } 33% { transform: scale(0.87); animation-timing-function: ease-in; } 45% { transform: scale(1); animation-timing-function: ease-out; } } ```
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值