a标签中使用img后的高度多了几个像素

最新推荐文章于 2021-06-28 16:59:57 发布
原创 最新推荐文章于 2021-06-28 16:59:57 发布 · 493 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了a元素因内部匿名文本及其外部匿名行级盒子导致的高度异常现象，并提供了三种解决方案：1. 清除匿名盒子高度，如设置line-height:0；2. 调整垂直对齐方式为顶部对齐；3. 将img元素设为display:block，避免行级盒对齐问题。

a元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了。解决办法一是消除掉匿名盒子的高度，也就是给a设置line-height:0或font-size:0;解决办法二是给两者vertical-align:top，让其top对齐，而不是baseline对齐解决办法三是给img以display:block，让它和匿名行级盒子不在一个布局上下文中，也就不存在行级盒的对齐问题其他解决办法也有，但这些都是从根本上解决问题

div中img图片下方空白问题，div高度不等于img图片的高度，会留出几个像素
love2016hy的博客
11-08 4047
在div中加入img图片时会发现div的高度并不等于img图片的高度，借用一下小米的logo做了一下测试，代码简单明了，请继续往下看： html> div class="wrap"> img src="https://m.mi.com//component/header/img/logo_121d4a6.png" alt="logo"> div> br>
标签里只有一个img，高度比图片占有的空间还高了一点
qq_35685011的博客
11-28 304
标签里只有一个img，高度比图片占有的空间还高了一点
IE6 浏览器常见兼容问题 大汇总（23个）
Web前端开发经验记录
07-01 1639
IE6 浏览器常见兼容问题 大汇总（23个）   IE6以及各个浏览器常见兼容问题 大汇总 综述：虽然说IE6在2014年4月将被停止支持，但是不得不说的是，IE6的市场并不会随着支持的停止而立刻消散下去，对于WEB前端开发工程师来说，兼容IE6 兼容各个浏览器，依然是不得不面对的工作。 在此总结了常见的浏览器兼容问题，里面也有IE6的常见兼容问题，供大家分享。
PHP图像操作：3D图、缩放、旋转、裁剪、添加水印（三）
淡忘~浅思
10-03 1401
5、PHP对图像的旋转 1: <div> 2: <h4>旋转之前</h4> 3: <img src="1.png" style="border:1px solid red;"> 4: </div> 5: <?php 6: header("content-type","text/html;charset=utf-8"); 7: 8: /* 9: *图片沿y轴旋转,以png格式为例 10: *@param stri
html a标签 嵌套img,A标签中包含嵌套img后，高度为什么多了几个像素?
weixin_30703633的博客
06-28 1813
最近博主在给自己的一个网站做模板，做logo的时候，A标签嵌套使用IMG，发现logo图片img标签47px，A标签高度54，多出7像素。检查CSS，没有任何多余代码可能会引起这个结果。注：图中a的display设置是为了方便演示添加的在网上搜索了半天，终于找到了原因和解决方法，为什么a标签嵌套img标签多出了几个像素：a元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertica...
a标签中使用img后的高度多了几个像素 解决办法
Bessicxie的博客
12-06 737
img是行内元素，默认display: inline; 它与文本的默认行为类似，下边缘是与基线对齐，而不是紧贴容器下边缘。解决办法一是消除掉匿名盒子的高度，也就是给a设置line-height:0或font-size:0; 解决办法二是给两者vertical-align:top，让其top对齐，而不是baseline对齐 解决办法三是给img以display:block，让它和匿名行级盒子不在一
为什么a标签中使用img后的高度多了几个像素？(转)
dengzihao1023的博客
05-23 1428
这是一个很多前端初学者遇到的问题！ 1、首先，标签是inline的，框模型是：行内框。行内框没有包含图片的表现，的标签就好像放在一条公路上一样。所以要使img能像放进一个盒子一样，就应该使用块级框：比如： display:block; /*或者*/ display:inline-block; 关于框模型！推荐你去看看css的官方http://www.w3.org/TR/CSS2
盒子含图片多出几像素高度的问题
Speed_Pig的博客
03-09 1082
问题 当一个盒子中含有一张图片，即使这个盒子(不管是块级元素还是行内块)没有设置高度，也会被内容撑起来等于图片的高度，但是事实并非如此。盒子的高度不等于图片的高度，而是多出了几像素，而这种问题出现在，html5、xhtml1.0 strict、xhtml1.1、html4.01 strict中。 代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;
css-盒子内包含img标签后，底部留白/盒子高度多了几像素的问题
no pains,no gains
07-09 747
今天在学习写京东案例的时候，在给一个盒子添加img之后，发现盒子高度高了几像素。 例如简单的一个div内包含一个img标签： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ border: 1px solid red; float: left; } &lt
关于img父容器的高度会比img的高度多几像素的问题
到得还来别无事，庐山烟雨浙江潮。
12-19 2347
产生原因简而言之： 基线问题，div是块级标签，img是行内块元素，在块元素里默认有3px或者4px空白（其实就是和文本的基线对齐不管有没有文本） 解决： 1. 设置图片（推荐） display:block 2. img { vertical-align:top;  }  3. 设置父元素：（不推荐） font-size:0 4  为div定高并且设置（不推荐） ...
为什么img放在 li中，底部会多出几个像素？
码厩
09-08 1924
&amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;img src=&amp;quot;img/1.jpg&amp;quot; style=&amp;quot;height: 60px&amp;quot;/&amp;amp;gt;&amp;amp;lt;/li&amp;amp;gt; 当使用以上布局时，会发现li的高度会比img的高度大几个像素。出现这种问题的原因是： img默认是一个行内元素
详解HTML/XHTML中img图像标签的基本用法
09-28
像素（Pixel）是计算机显示图像的基本单位，屏幕分辨率如 1024x768 表示横向有 1024 个像素点，纵向有 768 个像素点。在处理图像尺寸时，通常以像素为单位进行设定。理解像素概念有助于精确控制图像在网页中的呈现...
CSS3的几个标签速记(推荐)
09-22
本文将介绍CSS3中几个常用标签的速记方法，并提供相应的语法示例和说明。 1. border-radius: CSS3圆角 CSS3中的border-radius属性用于设置元素的圆角。这个属性能够给元素添加圆角效果，无需依赖图片或者额外的...
移动端webapp自适应布局
ShiLuoFeiYu的博客
03-08 3986
0.一些基础请看这篇：HcySunYang的blog：一篇真正教会你开发移动端页面的文章(二) width=device-width 这段代码是让布局视口的尺寸等于理想视口。 设备像素比（DPR） = 设备像素个数 / 理想视口像素个数（device-width）1.常规情况下js根据屏幕宽度动态计算 !(function(doc, win) { var docEle = doc.doc
rem的使用及踩过的坑
ShiLuoFeiYu的博客
03-08 1733
1.rem是蛤子？rem是css的一个单位。这个单位代表相对于根元素的 font-size 大小（例如 font-size <html> 元素）。当用在根元素的font-size上面时 ，它代表了它的初始值(译者注:默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em,当设置font-size=2rem的时候,就使得页面
网页图片缩放的深入剖析
ShiLuoFeiYu的博客
06-02 704
图片缩放问题困扰我许久了，贼鸡儿烦，今天彻底解决这个东西。一、浏览器图片缩放默认表现行为行为在想出解决方案之前，首先要弄清楚浏览器对于图片尺寸是怎么处理的，稍安勿躁，一步一步来分析下。 一个图片可以改变成任意尺寸，容器是80%：<div> <img src="https://dummyimage.com/600x400/000/fff" alt="Norway"> </div>不加任何属性：i
clearfix清除浮动最佳实践
ShiLuoFeiYu的博客
03-07 431
两种方法，不兼容ie8以下
css居中
ShiLuoFeiYu的博客
03-09 322
1.单行内垂直居中 height=line-height 优点：适合在所有浏览器，没有足够空间时，内容不会被切掉缺点：仅适合应用在文本和图片上，并且这种方法，当你文本不是单行时，效果极差，差到让你感到恶心。这种方法对运用在小元素上是非常有用的，比如说让一个button、图片或者单行文本字段。
H5中p标签中img标签与text等高样式
最新发布
06-15
4.使用flex布局时，如何处理p标签内的多个图片和文本混合的情况？</think># H5中实现p标签内图片与文本等高布局 在H5页面中实现p标签内图片与文本等高布局是一个常见的需求，下面我将详细介绍几种解决方案并提供...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值