a嵌套img标签的问题

最新推荐文章于 2024-01-15 11:17:34 发布
原创 最新推荐文章于 2024-01-15 11:17:34 发布 · 2.6k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

2019.08.16  周五：

html结构是这样的，未使用任何样式！

<body>
<div id="container">
	<a href="#"><img src="favicon.png" alt="logo"></a>
</div>
</body>

但在chrome的开发者工具中查看，a的高度并不是图像的高度，而是一个很奇怪的高度。

img_width.png

a_width.png

这是什么原因，如何让a标签的高度与img标签的高度一样

[<img>标签为什么会有底下的空白呢？这你要理解所谓的“基线(baseline)”。这是一个英文排版概念。我这里还是引用下知乎人的链接吧！http://www.zhihu.com/question/21558138 讲得很周到！]

总结这个问题的几种解法：
[a]处理基线

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

[b]强行去掉<a>标签的行高

a{display:block;line-height:0px;}

[c]没有设置行高的时候可以去掉字体大小；

a{display:block;font-size:0px;}
Html中发现a标签包含一个img标签，对齐方式没有居中问题
huangbaokang的博客
08-31 4706
自己一直是搞后端开发的，偶然接手一个项目，自己制作了一个比较简单的html页面，发现了一个问题，a标签包含img标签后，对齐方式改变了，纳闷了许久，最终还是解决了。<html> <head> <style type="text/css"> *{ margin: 0; padding: 0;
a标签里面包裹img标签，两者要完全登高等宽
qweasdzxc_1092665276的博客
04-02 5281
废话不多说，直接上代码。html:&lt;div id="head_game_name" class="head_game_name"&gt; &lt;a href="javascript:;" class="pic1"&gt;&lt;img src="img/nav_pic_icon01.png" alt="" &gt;&lt
a标签嵌套img标签，结果a标签不能被img标签撑开
热门推荐
weixin_39666697的博客
12-19 1万+
在控制台中可以看出img的宽度是22*22,a标签的宽度是22*16。 (1)那么为什么a标签嵌套img标签，结果a标签不能被img标签撑开？？ 答案1：(2)还有a标签嵌套img标签，a标签比img标签高？?答案2： img标签放在了a标签(inline模型)内部，由于inline不是用来包含内容的，因此这需要将a标签display改为inline-block或者block； 但是仅仅改变
关于a标签中内套一个img
nzjcnjzx
11-23 8097
最近写了几个页面，发现每次a标签里面有图片的时候，由于图片的大小切图的时候不是很准确，每次不设置a和img宽度和高度的时候，默认的a标签的高度会比img大一点，为了保证图片的宽高只需要设置mg和a的宽高相同，还需要将a的display设置为inline-block ,因为a是行内元素，不能设置宽高。
HTML基础————a标签与img标签
憨憨的博客
04-29 2365
a标签与img标签练习
html- a标签包裹img标签, 点击图片无法跳转问题记录及解决方法
qq_41421033的博客
10-24 1738
这里的解决方式通过把a标签跟img标签的结构改成同级, 然后样式中对a标签添加绝对定位, 并且保证a标签的z-index为当前最高层级。首先明确我们的目标, 就是a标签包裹的内容, 都能点击后以后直接跳转。
div嵌套 img 空白解决方法
09-25
标题提到的“div嵌套img空白解决方法”就是针对这个问题提供的一种解决方案。 首先，我们需要理解为什么会出现这样的空白。`img`元素在HTML中是行内元素（inline element），这意味着它在默认情况下与其他行内元素...
java代码-正则去除HTML代码中的IMG标签
07-15
`\\s+`匹配一个或多个空格，`[^>]*`匹配除`>`之外的任何字符零次或多次，这样可以捕获包含任意属性的IMG标签。`Pattern.CASE_INSENSITIVE`使匹配不区分大小写。 现在，我们可以创建一个简单的主程序来测试这个方法...
C#基于正则表达式抓取a标签链接和innerhtml的方法
08-30
此外，我们还可以使用正则表达式来抓取img标签的src和data-url。我们可以使用以下正则表达式模式： string prttern = "<img(\\s*(src=\"(?[^\"]*?)\"|data-url=\"(?[^\"]*?)\"|[-\\w]+=\"[^\"]*?\")>*\\s*/>"; 这...
帝国CMS调用可嵌套其他标签栏目缩略图的方法
09-29
本文将详细介绍如何在帝国CMS中实现可嵌套其他标签的栏目缩略图调用方法，以及不嵌套标签的调用方式。 首先，我们要理解帝国CMS的数据结构。在帝国CMS中，每个栏目（class）的信息存储在数据表`XX_enewsclass`中，...
html a标签 嵌套img,A标签中包含嵌套img后，高度为什么多了几个像素?
weixin_30703633的博客
06-28 1793
最近博主在给自己的一个网站做模板，做logo的时候，A标签嵌套使用IMG，发现logo图片img标签47px，A标签高度54，多出7像素。检查CSS，没有任何多余代码可能会引起这个结果。注：图中a的display设置是为了方便演示添加的在网上搜索了半天，终于找到了原因和解决方法，为什么a标签嵌套img标签多出了几个像素：a元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertica...
a标签里面包含img标签，出现a标签的高度高于img标签好几个px
weixin_30951231的博客
03-27 357
问题：a标签里面包含img标签，出现a标签的高度高于img标签好几个px 解决： a元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了...
a标签 img标签
Public places
07-20 3314
  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;a href="http://www.baidu
问题：a标签里嵌套img总是多4个像素
kliberty的博客
02-23 208
闲话1 Q：a标签里嵌套img总是多4个像素 A：img是行内元素，下边缘与基线对齐而没有贴紧a标签容器的下边缘。将img设置为块元素即可（display:block）
解决html里a标签嵌套img标签存在上下高度空白问题
管乐明的博客
04-10 829
解决html里a标签嵌套img标签存在上下高度空白问题 先上代码 实际中遇到的情况：a标签存在一个高度把img 标签挤出div <header> <div><a href="##" ><img src="./img/icon_back.png" alt=""></a></div> <div style="font-size: .4rem;">APP应用</div> &l
a标签中添加图片img，底部产生空隙
chenxi3218773的博客
11-16 3791
为什么在a标签中添加一张图片，图片下方和a标签之间会出现空隙？前言项目场景：问题描述：原因分析：解决方案： 前言 之前学习前端开发的时候遇到在a标签中添加图片时发现图片底部与a标签底部始终有一个空隙存在，百思不得其解为什么会出现这个问题，后来在网上找了半天知道了原因。 提示：以下是本篇文章正文内容，下面案例可供参考 项目场景： 前端学习时经常遇到的问题 问题描述： 学习前端+CSS的时候遇到，图片img在a标签中，始终和a标签底部有一个空隙 <head> <style> a
a嵌套img标签的问题:<img>元素底部为何有空白？
努力，追梦的博客
07-15 5332
元素底部为何有空白？ 现代浏览器中，元素默认情况下底部会有空白，那么这个空白到底是从哪里来的？ 1、首先，标签是inline的，框模型是：行内框。行内框没有包含图片的表现，的标签就好像放在一条公路上一样。所以要使img能像放进一个盒子一样，就应该使用块级框：比如： display:block; /*或者*/ display:inline-block; 关
img放在a标签中图片底部出现多余空白解决无法占满的问题
周五星的博客
01-08 1608
img放在a标签中图片底部出现多余空白解决无法占满的问题 原因分析： 其实非常的基本，因为当初设立标准的不是亚洲而是欧洲，inline 元素为了正确的显示 y j g 等带有尾巴的英文字母，会在底下留空，这要依据 font-size 去决定。 解决问题有以下方法: 1、将图片转换为块级对象 设置img为“display:block;”。在CSS代码中添加：“ img {display:bl...
【温故而知新】HTML链接a标签/图像img标签
日常笔记/总结/系列知识梳理
01-15 1763
HTML5 还提供了地理位置 API、文件 API、Web Storage API 等，使得开发者可以轻松地获取和使用用户的地理位置信息、文件内容、本地存储数据等。例如，HTML5 改进了表单元素，提供了更多的输入类型（如 email、number、range 等），使得表单的验证和输入更加方便；HTML5 是 HTML 的最新版本，增加了许多新的元素和功能，以适应现代网页开发的需求。属性，以提高可访问性，并为全部图像添加适当的宽度和高度属性，以避免页面加载时的布局问题。属性来指定链接的打开方式。
img标签超链接
最新发布
05-28
在HTML中，可以通过将`img`标签嵌套在`a`标签内部来实现图片作为超链接的功能。以下详细介绍其实现方法以及相关属性的设置。 #### 基本语法 要将图像用作超链接，需要将`img`标签放置在`a`标签内，并为`a`标签指定`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值