img 默认是行内元素，它旁边的空格是会保留的

消除图片下方间隙

最新推荐文章于 2023-03-16 15:42:52 发布

转载最新推荐文章于 2023-03-16 15:42:52 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lvchenfeng/p/4935973.html

本文介绍了解决图片下方出现莫名间隙的问题。当图片设置为行内元素且宽度为百分比时，可能会出现这样的间隙。解决方法是将图片的显示属性设置为块级元素。

img 默认是行内元素，它旁边的空格是会保留的。因此图片宽度设置百分百后下面会有点找不出原因的间隙。

解决办法：img{display:block}

转载于:https://www.cnblogs.com/lvchenfeng/p/4935973.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34254823

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Web前端技术分享：img标签下方出现空隙的问题解决方案

xiaoxijinger的博客

04-15

422

很多初学小伙伴在写页面的时候碰到过一个问题，当我们用一个div直接包裹img，img的下方会出现3px间距，如图代码如下：为什么会出现这种情况呢？因为img是一种类似text的标签元素，在结束的时候，会在末尾加上一个空白符（匿名文本），导致下方会多出来 3px 间距，其实我们在img右侧添加一个span包裹住文本，现象会更明显。下面我们来解决这个问题第一种方法：给div设置和img一样的高度；缺点：该方法不够灵活，一旦img尺寸改变，我们要重新设置div的高度第二种方法：给img设置

【网页前端设计HTML】水平线、div、自闭合标签及块元素和行内元素、特殊符号

weixin_53597021的博客

07-13

2467

使用所分享的知识，还不能够完成下图的设计，观察一下，我们还有什么知识没讲呢?聪明的你一定能看到：一条长长的线分隔开每一个科目，但是这条长线怎么表示，用什么标签呢?

参与评论您还未登录，请先登录后发表或查看评论

img是行元素还是块元素

weixin_43465508的博客

03-16

4202

img属于行内可替换元素，height、width、padding、margin均可用，效果 html5的img不是块级元素。img、input、textarea、select、object 都是替换元素。这些元素往往没有实际的内容，即是一个空元素。可替换元素的性质同设置了display:inline-block的元素一致。又因为img是可替换元素，具有独立的宽高，宽高就是图片本身的宽高。浏览器根据元素的标签和属性，来决定元素的具体显示内容，src:源属性,源属性的值是图像的 URL 地址。

img标签和p标签是行内元素还是块级元素？以及p标签中可以放img标签吗？

热门推荐

吴冬雪的博客

05-21

2万+

其他块级元素：常用的有：　div、p、ul、ol、li、dl、dt、dd、fieldset、form、h1~h6、hr、table另外还有：address、isindex、menu、noframes、noscript、pre、blockquote、center、dir、块级元素，默认宽度占满一行。HTML 是段落标签，除了可以添加文字内容外，完全可以添加其他。类似于 inline-block ，可以被p标签包裹。比如p是居中，图片也中了。也包括IMG图片标签。

行内元素和块级元素的区别，为何img、input等行内元素可以设置宽高??（夯实基础）

zhouzuoluo的博客

07-16

9972

我们习惯将html中元素分类为行内元素和块级元素，如下：·常见块级元素有：html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等；·常见行内元素有：span、a、img、textarea、button、input、br、label、selec...

img、input到底是行内还是块级元素？

weixin_30835933的博客

10-06

2363

一、img、input属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。行内非替换元素，例如, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和marginleft、right改变宽度。二、在文档类型定义（DTD）中对不同的元...

行内块级元素.txt

02-06

- `<pre>`：预格式化文本，保留空格和换行。 - `<blockquote>`：表示引用较长的文字或段落。 - `<marquee>`：创建滚动文本或图像。 - `<ul>`、`<ol>`、`<dl>`：分别定义无序列表、有序列表和定义列表。 - `<table>`...

HTML+CSS中完全的行内元素（inline element）和块元素（block element）

10-23

块元素默认独占一行，它们通常会被视为一个独立的容器，其中可以包含其他行内元素或块元素。块元素的宽度默认扩展到父元素的宽度，除非通过CSS进行显式设置。以下是一些典型的块元素： - **`address`** - 用于定义...

div嵌套 img 空白解决方法

09-25

行内元素之间的空白是由于它们之间的空格、换行或` `标签等造成的，浏览器会将这些空白视为内容，因此会在元素之间保留一定的空间。当`img`元素被`div`嵌套时，如果`div`内部还有其他内容，比如文本，这些文本...

vue行内元素有哪些？块级元素有哪些？空(void)元素有哪些？

08-03

vue的行内元素有Span、Strong、Em、i、img等。这些元素在默认情况下会水平排列，不会独占一行。而块级元素有Div、H1~H6、P、OL、UL、LI、DL、DT、DD、Table、Blockquote等。这些元素在默认情况下会独占一行，每个...

img标签之间空格的解决方法

shi_1204的博客

03-05

3484

img标签内的width和height指的是原图片的宽高后面不需要加单位. 如果要设置一张图片的宽高使用css, 只设置一个宽或高时,另一个会进行同比例缩放. 去除图片中间的空格比较简单的一种是吧img标签放在同一行, 因为img标签属于inline-block元素, 凡是带有inline的元素,都有文字特性.所有换行的img标签之间会被浏览器解析为默认有一个空格,也就是文字分隔符....

关于行内元素、块级元素和空元素的区别以及嵌套

李人

06-22

1487

在css盒子模型中，html元素中有块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？其实，这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素，能容纳其他块元素或内联元素。最常见的就是P和div这两个，说的简单点，块元素就好比一个四方块，可以放其他的四方块，并可以呈现在页面上任何地方。默认情况下块元...

微信内置浏览器动态生成二维码并长按识别

全栈道路

06-07

2430

img是行内元素，为什么也可以设置框高？

BigDaddy233333的博客

11-17

1504

尽管img是行内元素，但同时它也是置换元素，置换元素一般内置框高属性，因此可以设置其框高。那么什么又是“置换元素”呢？置换元素就是会根据标签属性来显示的元素。反之就是非置换元素了。比如img根据src属性来显示，input根据value属性来显示，因此可知道img和input是置换元素，当然同理textarea, select,也是置换元素 ...

行内元素img竟然可以设置宽高！

Schrodingers_Shiba的博客

10-11

3108

今天写静态页面时发现，img在限时模式设置为inline的时候，设置的宽度竟然还能生效。原来img既是行内元素又是置换元素（Replaced element）。所谓置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；另外input select textare...

魅族面试的一个问题，img是行内元素，为什么也可以设置框高？

kingliguo的博客

09-23

1万+

1.魅族一面面试官问我一个问题，img是什么元素？我第一反应是行内元素。判断一个元素是行内元素，还是块元素，无非就是看它是否是独占一行。img标签显然没有独占一行，固它是行内元素。这没有问题。 2.接下来，面试官又问，既然img是行内元素，那为什么可以通过CSS设置框高呢？这一问，给我问住了，确实之前没有想过这个问题，翻了一下资料，大概比较好的解释就是: 尽管img是行内元素，

2022年单片机-第讲.ppt