解决div下边距莫名多出4px问题

已于 2022-07-19 20:59:46 修改
阅读量737 收藏 1
点赞数 3
文章标签： css css3
于 2021-07-12 21:41:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SiShen654/article/details/118684655
版权

问题：div下边多出4px

主要是div标签内的留空导致的，解决如下：
将父盒子的文字大小设置为0即可

font-size: 0

编辑 | sishen
来源 | 前端兔
公众号 | 前端兔

关注公众号查看更多前端知识分享~~

死神654
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
用div包图片导致div下边缘多出几px的边距
qq_45064049的博客
05-16 807
div中放一个图片,往往div的下边缘会多出来几px的边距. <!doctype html> <html> <head> <title></title> <style type="text/css"> div{ background: black; } </style> </head> &...
父元素高度比子元素高度多几个像素的解决方法
weixin_30855761的博客
02-10 1144
html代码： 1 <div> 2 <textarea></textarea> 3 </div> 其中textarea元素的高度为80px，而它的父元素div高度为84px，为什么会多出4px呢？ 解决方法是： 1、设textarea为 display: block; 转载于:https://www.cnblogs.c...
Android ImageView显示的图片有上下空白块Padding
a644388262的博客
08-28 1044
Android开发中，在Android Studio的xml布局中放入ImageView时，有时候会出现图片莫名其妙的多了上下的边距： 但是明明打开这张图片是没有这个边距的，这个时候需要在这个ImageView控件中添加一行代码： android:adjustViewBounds="true" 原因是因为图片高度设置的是wrap_content，但有时候图片的质量很高，如果宽度显示的效果是适应屏幕的，那系统就会误以为高度也适应了屏幕。 所以用android:adjustViewBounds属性用于保持宽
关于div包裹img、iframe等标签会多3px或4px的问题
Zning_的博客
04-19 382
css中img标签
div中底部4px像素问题
weixin_42299708的博客
08-15 208
div中4px像素空白问题
div包含的img底部多出空白，怎么办？
04-21 185
给img的容器加　　　　font-size: 0; 对img display: block; 对img　　 vertical-align: top; 突然想起张鑫旭《css世界》，说这个空白产生的原因：img空白节点的存在，空白节点的行高，字体大小导致的。（描述不知道有没...
用div+css解决出现水平滚动条问题
10-30
"用div+css解决出现水平滚动条问题" 在 Web 开发中，水平滚动条的出现是一个常见的问题，特别是在使用 div + CSS 布局时。今天，我们将讨论如何使用 div + CSS 解决出现水平滚动条问题。 问题分析 在上面的代码中...
div里的图片距离div下边框多3个像素的解决方法
12-13
不废话，先说解决办法 著名的3像素Bug。你可以给img的css设置display: block; /*用来去除div下边莫名多出来的3px的像padding-bottom的东西。注:vertical-align: middle; 亦可*/
DIV多层嵌套margin-top的BUG问题
09-25
本文主要探讨一个常见的前端开发问题，即“DIV多层嵌套margin-top的BUG问题”。在某些浏览器，特别是Firefox和Internet Explorer的不同版本中，这个问题可能导致预期的样式效果出现偏差。 问题起源于浏览器对于CSS...
IE6 两个div有间隙的问题（IE 3px bug）
12-10
为了解决这个问题，开发者们发展出多种策略。其中一种常用的方法是利用负边距（negative margin），将其中一个或两个div的外边距设置为负值，以便拉近它们的距离。然而，这种方法的局限性在于，如果这些div嵌套在一...
IE6下div图片下边4px空隙bug的解决办法
07-12 105
IE6下图片下边有空隙的解决方法网上已经有很多种解决办法了，我今天同大家一起复习一下那些办法，并提供一些新的方法供大家参考。 下面请先看一下出现问题的代码： IE注释bug #all { float:left; padding:10px 30px; font-size:12px; color:#FFF; background-color:#CCC; } #sub { fl...
inline-block标签间出现空白的解决方案(4px 8px问题)
iammarrio的博客
10-27 1018
先贴上demo代码： Title *{ margin: 0; padding: 0; } ul { list-style: none outside none; padding: 16px;
svg设置高度后 父级div会比svg高度高4px左右
pgLi
06-27 2609
背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color: #000"&...
css中高度比img多出4px的问题
weixin_30273931的博客
03-22 425
一句话概括：为什么<a>标签比里面的img高度多出4px 的问题，主要还是由于 img是inline element, it's height is caculated differently as related to the default line-height value. On inline elements, the line-height css property s...
解决 div或者a标签的高度比里面的img高度多了5px 问题
xiaozaq的博客
01-18 3546
a元素或者div元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了。 解决办法一是消除掉匿名盒子的高度，也就是给a设置line-height:0或fo
盒子的高度比图片多4px问题
jhfvuyhgui的博客
03-31 441
盒子的高度比图片多4px问题 如图所示 这里我给图片设置了高度等于200px，图片在网页中的高度也是200px，没有问题。 但是当我检查box盒子时，发下box盒子的高度是204px，比图片的高度多出了4px； 在查阅资料后发现这里是因为img标签是行内标签，而行内标签默认的是基线对齐而不是底线对齐，如图所示：会给英文字母预留下4px的高度。这就导致图片下方多出了4px，从而导致盒子的高度多出4px。 解决方法： 1.把img标签转换为块元素，因为块元素默认是底线对齐，就不会出现这个问题； 2.给img
a标签中使用img后的高度多了4px
溪水博客
03-27 1322
在某个项目中，发现a标签中使用img后的高度多了4px，各种样式调整，查阅资料，最终解决此问题。由于img是行内元素，默认display: inline; 它与文本的默认行为类似，下边缘是与基线（baseline）对齐，而不是紧贴容器下边缘。将displayp设置为block即可消除4px的bug。其实解决方法不止一种：1.将图像定义成    img:{display:block;}2.给父级设置...
在div中设置下边距
最新发布
06-02
可以使用CSS样式来设置div元素的下边距，例如： ``` div { margin-bottom: 20px; } ``` 这会给所有的div元素设置一个下边距为20像素。你也可以为特定的div元素设置下边距，使用CSS选择器来选择该元素并设置下边距...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值