css中为什么经常见到img{dispaly:block}？

最新推荐文章于 2026-05-19 09:36:35 发布
原创 最新推荐文章于 2026-05-19 09:36:35 发布 · 1.4k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css
本文介绍了解决IE浏览器中图片下方出现白色间隙的方法。通过将图片的显示属性设置为block或将垂直对齐方式设为top、bottom等，可以有效消除这一问题。
其实也就是怎么消除IE img 3px bug的问题，一般在制作轮播网页时候，我们对图片设置img{display:bolck}。这是因在早期的IE6以下版本中，图片下方会有一个白色空隙产生，而img是一个内嵌元素，这样设置之后可以把img变为块级元素从而来消除这段空隙。当然也可以通过设置垂直对齐方式来消，即vertical-align:top|bottom|text-top|text-bottom。
qq_35534823
关注
img 标签下多余空白的解决方法
12-10
1、将图片转换为块级对象 即，设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {display:block;}”。 2、设置图片的垂直对齐方式 即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。如本例中增加一组CSS代码：“#sub img {vertical-align:top;}”。 3、设置父对象的文字大小为0px 即，在#sub中添加一行：“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设
img 设置css样式宽高
liuriri的博客
11-15 238
img设置样式宽高不生效问题，在设置img宽高时需要设置display:block;或者display: inline-block;
img{display:block;}与Img图片默认的3px空白缝隙解决方法以及display相关问题
Silence-Lee的博客
05-18 5175
img{display:block;}与Img图片默认的3px空白缝隙解决方法以及display相关问题 1、为什么经常见img{display:block;}这种设置？ img{display:block;} 表示将img标签，即图片标签由行内元素变成一个块级元素。 一般在制作轮播网页或使用到img图片时，我们都会对图片设置img{display:bolck}。因为img图片下方会有一个3p...
Markdown-to-image终极路线图：即将推出的10个新功能和社区发展规划
最新发布
gitblog_00810的博客
05-19 377
**Markdown-to-image** 是一个强大的React组件，能够将Markdown文档转换为精美的社交媒体图片海报。这款开源工具让内容创作者、开发者和营销人员能够轻松生成专业的视觉内容。在前100个字内，我们再次强调：Markdown-to-image的核心功能是将Markdown文本快速转换为适合Instagram、Twitter、Facebook等社交平台的精美图片海报，支持一键部
html_习惯累积沉淀_新浪博客
wangduqiang747的博客
01-23 293
dvorak1206 | 四级 img{display:block;} 表示将img标签，也就是图片标签变成一个区块 标签是分成 区块 和 内联块 2种 一个标签显示一行的称为 区块，如（段落P，标题H系列，DIV等） （你没见过在2个P标签放在一行能显示的情况吧）？ 若标签能在一行显示N个，表明此标签为 内联块，如（,,） 区块和内联块最大的区别就是，区块可以设置宽、高、居中...
img {display: block；}
m0_59417406的博客
08-04 393
本文介绍了使用CSS让图片水平居中的最佳实践。通过将img标签设置为display: block使其成为块级元素，再配合margin: 0 auto实现自动水平居中。文章对比了两种主要方法：推荐使用display: block + margin: auto方案，因其语义清晰、可控性强；而text-align: center适用于保持行内状态的图片。这种基础布局技巧对理解CSS盒模型和元素定位机制具有重要意义。
img{display:block}
Soler_lia的博客
09-29 2644
有些版本浏览器，在图片和文字间会出现白边。加上 img{display:block} ，将img变为块元素。 区块和内联块最大的区别就是，区块可以设置宽、高、居中对齐等操作，而内联块不行。 因为img默认是按基线(baseline)对齐的。对比一下图片和右边的p字母，你会发现这三个字母的“小尾巴”和图片下方的空白一样高。下面这张图中的黑线就是那条基线。 要去掉空格可以使用vertic
CSS - dispaly:inline-block
iteye_3352的博客
04-22 181
如果不是 块级（ block ） 类型的元素，当设置 width, height, margin 属性时不起作用。因为 display 为 inline 时，没有这些属性。 但是，如果 display 设置为 : inline-block 的元素，即保持了 inline 的自调节位置，又同时具备了 block 的 width, height, margin 属性。...
dispaly属性四大常用取值
qq_36470686的博客
09-27 1231
四大常用取值 值 描述 none 此元素不会显示 inline 此元素将显示为块级元素，且前后会带有换行符 block 默认。此元素会被显示为内联元素，且前后没有换行符 inline-block(CSS2.1新增的属性) 行内块元素               我们在介绍这四种display取值之前我们先区分一下什么是块级元素与行级...
inline-block、float、flex、溢出隐藏（两种）
qq_44997147的博客
01-08 1746
dispaly:inline-block和float:left的区别 dispaly:inline-block float:left flex <div style="background-color: #eee;height: 154px;padding: 21px 0;"> <div class="container"> <div style=...
dispaly的 inline, block, inline-block
tyust512的专栏
06-03 356
block： 　　就是将元素显示为块级元素, 总是在新行上开始； 　　高度，行高以及顶和底边距都可控制；　宽度缺省是它的容器的100%，除非设定一个宽度 　　, , , , 和 是块元素的例子。 　　display:inline就是将元素显示为行内元素. inline：  　　和其他元素都在一行上；　高，行高及顶和底边距不可改变；　　宽度就是它的文字或图片的宽度，不可改变
img标签设置display:block，宽度无法100%
weixin_34204057的博客
08-15 1390
img标签设置display:block，宽度无法100% 一些个人总结，第一次发文章，有什么不足的地方，还请各位多提意见 现象 如下代码，img标签设置了display：block，尺寸宽度无法设定为100% <!DOCTYPE html> <html lang="en"> <head> ...
display：block的作用
weixin_45394002的博客
07-31 3124
display：block；比较常用于这两个标签——因为这两个标签非块元素，如果不用display：block定义一下，那么定义width、height等和长宽相关的css属性时会发现完全不生效。
DIV+CSS里display:block的作用
ithouse的专栏
07-15 2961
display：block的作用是让其他标签如：a、span、li等标签获得div的特性
php css 改变宽度,img标签设置display:block属性时宽度无法设定为100%的解决办法
fntcw的博客
12-11 623
本篇文章所说的内容是img标签设置display:block属性时宽度无法设定为100%的解决办法，方法很详细，有一定的参考价值，有需要的朋友可以参考一下，希望可以对你有所帮助。 现象 如下代码，img标签设置了display：block，尺寸宽度无法设定为100% img标签设置display:block，宽度无法100% 原因 替换元素和非替换元素 元素是文档结构的基础，在CSS中，每个元素...
CSS显示模式、特性、浮动
x0572_的博客
07-20 565
css显示模式， css三大特性，css浮动
css之 img 图片底部有间距原因及解决方法
平平无奇小码农的博客
03-04 8345
目录前言现象原因解决方法1、给img（图片）设置display: block;2、给img（图片）设置vertical-align: bottom;3、修改line-height值（div的line-height）4、div的font-size=0 前言 在开发中，我们经常会遇到图片底部多出几个px间距的问题 ，这是什么原因，我们又该如何解决呢？ 现象 我们可以看到，图片和div之间会有空隙，并不是紧贴着div底部。 原因 因为图片是行内元素，默认的图片对齐方式为vertical-align:bas
display:block详解
热门推荐
路漫漫~
03-24 14万+
1、每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。 2、块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；      行内元素 ： 自己的独立空间，它是依附于
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值