块级标签包含行内标签底部溢出3px

最新推荐文章于 2023-01-02 21:27:42 发布
最新推荐文章于 2023-01-02 21:27:42 发布
阅读量266 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35603476/article/details/106243433
版权

问题：div里包含img底部多出3px

在设置css阴影时发现此问题，检查UI及盒子属性没问题

后了解到是 " 3px bug "

img内联元素，div是块元素，浏览器解析时会在img下预留高度，大小因浏览器而异

类似于文本text元素，末尾会有一个空白符，所以会多出几像素

解决办法不限于如下三种：

1.设置div { font-size: 0 } 将外层块级标签的font-size设置为0；

2.设置img { display: block } 将内层行内标签的display设置为block，将其变为块级标签；

3.设置img { vertical-align:middle } 将内层行内标签设置垂直对齐方式

我选择了常用的display属性，问题解决

 

 

年三十
关注
专栏目录
HTML 行内元素 与 块级元素
weixin_42012282的博客
04-23 439
目录 1.HTML 行内元素 与 块级元素 2.常用的 display 值 3.行内元素 和 块级元素 盒模型区别 4.块级元素 与 overflow 5.实践 1.HTML 行内元素 与 块级元素 行内元素一般是内容的容器，而块级元素一般是其他容器的容器。一般情况下，行内元素 只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和...
css-浮动，定位，溢出处理
Startpoupee的博客
03-18 356
浮动，定位
两个行内块元素同行显示时，会出现3px空白间隙，如何解决？
Anana13的博客
07-22 671
先上代码看问题 <div class="father"> <span class="son1">哈哈哈哈哈</span> <span class="son2">哦哦哦哦哦</span> </div> .son1 { background-color: #bfa; display: inline-block; } .son2 { background-color: pink; display: in
块级标签包含行内标签底部出现3px间隔的解决办法
weixin_34319111的博客
08-23 317
当块级标签（如div）内包含了行内标签（如img），则外层元素与内层元素底部会出现3px的间隔； 代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &...
行、块级标签分类
hboren的博客
08-23 6270
HTML标签 一、常见的行级标签：a（超链接）、span（空标签）、strong（加粗）、u（下划线）、em（斜体） 二、常见的块级标签：div、p（段落文本）、 h1-h6（标题）、ul（无序列表）、li、dl（自定义列表）、dt、dd 三、常见的行内块级标签：img（图片标签）、input、textarea（文本框）（能设置宽高、也能呆在同一行） ...
【疑点】<p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签？
C84395836的博客
11-07 550
最近，在码代码的时候，就是下面的这段代码，我犯了一个很不起眼，但犯了就致命的BUG。 <body> <p> <ol> <li>Hello</li> </ol> </p> <div>How are y...
块级元素包含行内元素（img、span等）底部多出3px间隔的解决办法
duguxueao的专栏
09-22 346
html: <div class="logo_left"><!--div的高度是83px--> <img src="images/logo.jpg"/><!--图片的高度是80px--> </div> 解决： 1.那么，为什么div的高度会比img的高度多3px呢？ 　　这是因为，行内元素后面会跟一个空白符，会使它的高度多出3px。 2.怎么解决？ 　　我在查阅验证之后总结了4种方案： 　　1. 设置div{ fon
CSS高级技巧——鼠标样式，轮廓，文本域防拖拽，vertical-align 垂直对齐，文字溢出问题
流楚丶格念的博客
07-03 4773
CSS高级技巧 CSS用户界面样式 所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白(就是普通是鼠标指针) | pointer 小手 | move 移动 | text 文本 鼠标放我身上查看效果哦： <ul> <li styl
前端标签和属性整理
starry_sky_ke的博客
09-19 1197
前端标签和属性整理
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6472
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
CSS的块元素,内联元素,内联元素的间隙,元素的溢出,浮动,定位
dust__的博客
06-12 590
一.块元素,内联元素,内联块元素 1.块元素: 也称行元素, 布局中常用的标签如:div,p, h1-h6,ul,li... 支持全部的样式 可以设置元素的大小,并且元素是独占一行显示,如果没有设置宽度,默认的宽为父级100%盒子占据一行 2.内联元素: 也称行内元素,布局中常用的标签如:a,span,b,u,i... (1)...
div中放入一个img元素导致div高度会多出3px问题
zeng092210的博客
01-23 460
我的结构如下图， &lt;div class="main-box"&gt; &lt;div class="container"&gt; &lt;img src="./images/icon-content.jpg" alt=""&gt; &lt;/div&gt; css部分为： .main-box ,.container ,.mai
元素的溢出处理以及元素的浮动
weixin_30530939的博客
09-17 308
元素的溢出处理 css里面添加样式： overflow: hidden; 如果子元素的内容溢出，则隐藏多余部分 overflow: scroll; 如果子元素的内容溢出，则以滚动条现实内容 overflow: auto; 如果子元素的内容溢出，根据内容多少自动使用滚动条 元素的浮动 元素浮动，是在标签嵌套时用来，控制子元素在父级元素内部左右移动的效果。...
IE6 在float对象边的块之间出现3px间距的处理方法（ IE6 3px bug）
萌萌的It人 www.itmmd.com
05-24 1026
如果一个块加了float：left属性，而边上的块若没有加浮动属性，这时IE6中这两个块就会产生3px的间距，即 IE6 3px bug。 解决方法：将边上的块加上float属性可解决。<!-- google_ad_client = "ca-pub-1944176156128447"; /* cnblogs 首页横幅 */ google_ad_slot = "5419468456"; googl
块级标签和内联标签之间的嵌套规则
ShiYadong的专栏
07-18 1760
随着时间的推移，我们都对HTML有了一定的了解，写代码的时候我们会发现标签之间，有的能嵌套，有的不能嵌套； （1）块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。 （2）块级元素不能放在p里面。
使用display:inline-block;产生间距处理办法
weixin_45162984的博客
06-01 1535
使用display:inline-block;产生间距处理办法 使用display:inline-block;属性会产生大约3px的间距,清除间距的方法就是letter-spacing属性 <style> body,body * { margin: 0; padding: 0; } .a {...
CSS中的单行、多行文本溢出总结
前端学习博客
01-15 8843
文章目录一.用到的相关属性1.white-space2.word-break3.text-overflow:4.`overflow`二.单行文本溢出三.多行文本溢出 一.用到的相关属性 1.white-space 这个属性是用来控制空白字符的显示的，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line。默认是normal。 ①white-space: nowrap: 不仅空格被合并，换行符无效，连原本的自动换行也没有了！只有<br
css基础-网页的布局思想、行内元素转换为块元素、内容溢出的处理、div盒子的定位
muzidigbig的博客
11-17 1612
css基础-网页的布局思想、行内元素转换为块元素、内容溢出的处理、div盒子的定位
HTML中元素溢出问题
sinat_31907813的博客
09-18 9420
1.当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。 2.overflow的设置项： 1、visible 默认值。内容不会被修剪，会呈现在元素框之外。 2、hidden 内容会被修剪，并且其余内容是不可见的。 3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 4、auto ...
行级标签 块级标签 行内标签
最新发布
06-02
行级标签、块级标签和行内标签都是HTML中的标签，用于标记和定义网页中的内容。 行级标签： 行级标签指的是标签所包含的内容在浏览器中会被显示为一行，一般用于对文本进行标记。常见的行级标签有： - `<a>`：用于创建超链接 - `<span>`：用于设置文本的样式（如颜色、字体等） - `<strong>`：用于强调文本内容 - `<em>`：用于表示文本内容的强调语气 块级标签： 块级标签指的是标签所包含的内容在浏览器中会被显示为一个块，一般用于对整个段落进行标记。常见的块级标签有： - `<div>`：用于对整个页面或页面中的一个区域进行划分 - `<p>`：用于表示一个段落 - `<h1>`~`<h6>`：用于表示标题 行内标签： 行内标签指的是标签所包含的内容在浏览器中会被显示为一行，并且可以和其他行内标签在同一行显示。常见的行内标签有： - `<strong>`：用于强调文本内容 - `<em>`：用于表示文本内容的强调语气 - `<a>`：用于创建超链接 - `<img>`：用于插入图片 - `<input>`：用于创建表单元素
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值