img{display:block}

最新推荐文章于 2021-03-21 02:53:35 发布
最新推荐文章于 2021-03-21 02:53:35 发布
阅读量2.4k 收藏 4
点赞数 3
分类专栏： 前端系列学习 文章标签： html block
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Soler_lia/article/details/78131377
版权

 有些版本浏览器，在图片和文字间会出现白边。加上 img{display:block} ，将img变为块元素。

区块和内联块最大的区别就是，区块可以设置宽、高、居中对齐等操作，而内联块不行。
因为img默认是按基线(baseline)对齐的。对比一下图片和右边的p字母，你会发现这三个字母的“小尾巴”和图片下方的空白一样高。下面这张图中的黑线就是那条基线。

要去掉空格可以使用vertical-align: bottom或将img标签变为块级元素。


https://segmentfault.com/q/1010000000694663

Soler_lia
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html_习惯累积沉淀_新浪博客
wangduqiang747的博客
01-23 193
dvorak1206 | 四级 img{display:block;} 表示将img标签，也就是图片标签变成一个区块 标签是分成 区块 和 内联块 2种 一个标签显示一行的称为 区块，如（段落P，标题H系列，DIV等） （你没见过在2个P标签放在一行能显示的情况吧）？ 若标签能在一行显示N个，表明此标签为 内联块，如（,,） 区块和内联块最大的区别就是，区块可以设置宽、高、居中...
img{display:block;}与Img图片默认的3px空白缝隙解决方法以及display相关问题
Silence-Lee的博客
05-18 4703
img{display:block;}与Img图片默认的3px空白缝隙解决方法以及display相关问题 1、为什么经常见img{display:block;}这种设置？ img{display:block;} 表示将img标签，即图片标签由行内元素变成一个块级元素。 一般在制作轮播网页或使用到img图片时，我们都会对图片设置img{display:bolck}。因为img图片下方会有一个3p...
img display:block
zengshaotao的专栏
11-12 340
<div style="padding:0px;width:25%;height:400px;border:1px solid red;float:left">     <img alt="" src="image/clothes/chenshan.jpg" style="width:100%;height:100%;display:block">    <
轮播——改img的display
bide_tootight的博客
03-08 655
轮播图几乎存在于每个网站的主页。轮播图的实现方法有很多种，比如改变img的display、img的opacity或者改变ul的marginLeft达到无缝轮播等等。今天给大家介绍“改变img的display”这种方法。这种方法的实现原理是如此的简单，如下图：把div#pic的定位设置为position:relative;而div#pic中的5个img的定位设置为position:absolute;...
给img加display: none；一样会消耗资源请求
前端精髓
08-21 1114
<img style="display: none;" src="https://img.pic88.com/preview/2020/08/05/15966339251452714.jpg!s640w" alt="logo"> 浏览器还是会发送图片资源请求，这样并没有达到懒加载图片的作用！！！
关于css display: inline block inline-block的区别分析
09-25
`display: inline`、`display: block` 和 `display: inline-block` 是三种常见的值，它们各自具有不同的行为和用途。 1. **display: inline** - `display: inline` 使得元素以行内元素的方式呈现，这意味着它们会...
display属性介绍和使用
11-26
* Display 属性只能应用于块元素和内联元素，不能应用于替换元素（如 img、input 等）。 * Display 属性的值不能与其他样式属性同时使用，例如不能与 `float` 属性同时使用。 * Display 属性的值可能会影响元素的...
img 标签下多余空白的解决方法
12-10
即，设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {display:block;}”。 2、设置图片的垂直对齐方式 即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。...
inline-block带来的元素间距问题解决
09-24
首先，`display: inline-block` 是一种混合型布局模式，它结合了`inline`元素的并排显示特性与`block`元素的宽高控制能力。在`inline-block`模式下，元素可以像文本一样排列在同一行，但也可以设置宽度、高度、内...
解决img标签上下出现间隙的方法
09-28
最直接的解决方案是通过CSS的`display`属性将img标签的类型改为block。这样做可以让img标签像div一样独占一行，不再受到内联元素的影响。代码如下： ```css img { height: 200px; margin: 0; padding: 0; ...
php css 改变宽度,img标签设置display:block属性时宽度无法设定为100%的解决办法
weixin_42519253的博客
03-21 629
本篇文章所说的内容是img标签设置display:block属性时宽度无法设定为100%的解决办法，方法很详细，有一定的参考价值，有需要的朋友可以参考一下，希望可以对你有所帮助。现象如下代码，img标签设置了display：block，尺寸宽度无法设定为100%img标签设置display:block，宽度无法100% 原因替换元素和非替换元素元素是文档结构的基础，在CSS中，每个元...
img标签设置display:block，宽度无法100%
weixin_34204057的博客
08-15 1253
img标签设置display:block，宽度无法100% 一些个人总结，第一次发文章，有什么不足的地方，还请各位多提意见 现象 如下代码，img标签设置了display：block，尺寸宽度无法设定为100% <!DOCTYPE html> <html lang="en"> <head> ...
display的设定block;inline;inline-block
u012485291的专栏
06-14 638
display:block就是将元素显示为块级元素. 　　block元素的特点是： 　　总是在新行上开始； 　　高度，行高以及顶和底边距都可控制； 　　宽度缺省是它的容器的100%，除非设定一个宽度 　　, , , , 和 是块元素的例子。 　　display:inline就是将元素显示为行内元素. 　　inline元素的特点是： 　　和其他元素都在一行上； 　　高，行高及顶
前端学习Day10
wry1213的博客
03-27 442
一.display:inline-block; 1.元素类型的转换： display属性： 属性值： block/inline/none 大部分块状元素默认的display的值block,其中li默认的值 list-item (列表元素) 大部分内联元素默认的display的值inline,其中input默认的值 inline-block(行内块元素) 2.内联...
两张图片之间的间隙——display中的inline属性
lonzisng
02-17 557
现象 相信不少人都遇到过两张img中间那条可恶的间隙吧, 直接上例子： HTML： &lt;div&gt; &lt;img src="images/img (1).jpg" alt=""&gt; &lt;img src="images/img (2).jpg" alt=""&gt; &lt;img src="images/img
css中为什么经常见到img{dispaly:block}？
假面猫的博客
07-07 1334
其实也就是怎么消除IE img 3px bug的问题，一般在制作轮播网页时候，我们对图片设置img{display:bolck}。这是因在早期的IE6以下版本中，图片下方会有一个白色空隙产生，而img是一个内嵌元素，这样设置之后可以把img变为块级元素从而来消除这段空隙。当然也可以通过设置垂直对齐方式来消，即vertical-align:top|bottom|text-top|text-botto
!!!css如何让img图片居中？css的display属性实现图片居中（代码实例）
weixin_34380296的博客
04-16 1375
在我们开发前端页面的时候，为了让页面效果美观，会让图片呈现居中效果。那么css怎么让img图片居中显示呢？本篇文章给大家带来css如何让img图片居中？css的display属性实现图片居中（代码实例），让大家可以了解并掌握css的display属性设置img图片居中的两种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。 首先我们来了解一下display属性实现图片居中...
display:block;
最新发布
06-03
这是CSS中用来设置元素显示方式的属性，表示将元素显示为块级元素。块级元素会在页面上独占一行，可以设置宽度、高度、内边距和外边距等属性，常见的块级元素有<div>、<p>、<h1>~<h6>等。与之对应的是display:inline;，将元素显示为行内元素，不会独占一行，只会占据自身宽度的空间，不能设置宽度、高度等属性，常见的行内元素有<span>、<a>、<img>等。还有一种是display:inline-block;，将元素显示为行内块级元素，可以设置宽度、高度、内边距和外边距等属性，常见的行内块级元素有<input>、<button>等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值