2022-01-04 学习记录--CSS-解决img图片底部自带3px距离 + white-space的用法

已于 2022-03-09 22:52:50 修改
阅读量506 收藏
点赞数 3
分类专栏： 学习 文章标签： css css3 前端
于 2022-01-04 20:49:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48850734/article/details/122311377
版权

一、CSS-解决img图片底部自带3px距离

给该img加个样式即可：

第一种方法、display: block;

第二种方法、vertical-align: top;

【知识越基础，越容易忽略，所以在这里做个笔记☺️】

二、white-space的用法

在这里插入图片描述

小呀小萝卜儿
关注
专栏目录
vue-cropper实现uniapp图片裁剪功能方案 (vue2和vue3都有)
wlor的博客
10-19 315
vue-cropper实现uniapp图片裁剪功能方案vue2： vue3： 二、引入相关css文件 vue3才需要引入样式，vue2不需要 组件封装
HTML5+CSS3【字体属性，背景、文本、 列表、表格属性】(七)-全面详解（学习总结---从入门到深化）
02-03 451
本阶段为基础阶段，主要学习HTML基本结构、骨架、标签和CSS基本样式。通过对这些标签的使用，熟悉布局的搭建结构。合理运行对应标签实现试图效果，是本阶段必须要掌握的知识，为接下来的学习奠定基础。
2021-05-06 利用vertical-align实现垂直居中效果以及解决图片底部3px的间隙bug
GAARA
05-06 223
vertical-align可以用来给块元素设置垂直对齐方式,对于非行内块元素需要先转化成行内块元素   示例: <style> img { /* img已经是行内块元素 */ vertical-align: middle; } span { display: inline-block; vertical-al
图片三像素问题及解决方法
m0_72959610的博客
08-08 378
图片三像素问题及解决方案
图片下方出现多3px的原因及解决方法
weixin_46246967的博客
08-18 50
图片下方出现多3px的原因及解决方法
css 在div中插入图片，图片下方会有3px的空隙
Khun_HWJ的博客
05-26 841
DIV中插入图片的话就会出现图片的下面有大概3px的空隙。在DW中看不到，但是在浏览器浏览的时候看出问题了。 有4个解决方法： （1）<img> css 添加 display:block; （2）<img> css 添加 vertical-align:top; （3）<img> css 添加 vertical-align:bottom; （4）图片外层...
css遮罩层从下往上_CSS:图片自带3px下边距的bug修复
weixin_39778400的博客
11-29 259
有个朋友有这样一个需求，在一张图片上放置一个半透明的遮罩层，当鼠标悬停其上，减少遮罩的透明度，让图片显示更清晰，效果图如下：简化HTML如下：Mask TextCSS样式文件如下：.item {width: 200px;margin: 100px auto;position: relative;overflow: hidden;background: yellow;}.item img {widt...
uni-app入门学习
2401_84092508的博客
04-20 1050
官方网页uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。具有vue和微信小程序的开发经验，可快速上手uni-app为什么要去学习uni-app？
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
weixin_46615135的博客
03-23 1568
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4804
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
解决img图片底部3px
my_csdn2018的博客
05-17 3179
给样式添加： display: block  或者 vertical-align: top 如果觉得对亲有用 帮忙点下赞哦！！！
css奇淫技巧--img的3px
weixin_30480075的博客
08-31 126
今天在写页面的时候，偶然发现将一个img放入div中，底部会多出来差不多3px（chrome浏览器调试）。一开始以为只是简单的边距问题，但是后来怎么也解决不了，无奈百度之，才发现这是一个很普遍的"bug" 原因 img是一种类似text的标签元素，在结束的时候，会在末尾加上一个空白符（匿名文本），这个文本外有一个匿名行级盒子，它默认的vertical-align是baseline的，而且...
如何解决图片3px
qq_45279180的博客
11-23 1930
前言 其实刚开始我看到这个问题的时候也不知道是什么原因，因为当时刚学了一个vertical-align属性所以就设置了vertical-align为center但是并没有解决问题，后来查了资料才知道是因为vertical-align的默认值的问题。 原因：主要是因为图片的垂直对齐方式vertical-align引发的，默认值是baseline，默认为此值时图片下方就会多出3px。 解决方案： 1.将图片的垂直对齐方式vertical-align的值设置为bottom，就可以解决这个问题。 2.将图片disp
小白成长日记之CSS：消除img自带下间距
weixin_44358713的博客
02-27 1562
img是行内块元素，它有自带的3px的下边距，会与下面的元素有间隙。
img放在a标签中图片底部出现多余空白解决无法占满的问题
周五星的博客
01-08 1419
img放在a标签中图片底部出现多余空白解决无法占满的问题 原因分析： 其实非常的基本，因为当初设立标准的不是亚洲而是欧洲，inline 元素为了正确的显示 y j g 等带有尾巴的英文字母，会在底下留空，这要依据 font-size 去决定。 解决问题有以下方法: 1、将图片转换为块级对象 设置img为“display:block;”。在CSS代码中添加：“ img {display:bl...
css之 img 图片底部有间距原因及解决方法
平平无奇小码农的博客
03-04 6962
目录前言现象原因解决方法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
[Web] html中图片下面有空白（3px左右）原因及解决方案
weixin_42575028的博客
03-08 1863
我们在页面中写样式的时候有时候会遇到这样的情况： 原因：img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px。 解决方案：img{ display:block;} 或者img{ vertical-align: top;} 注：vertical-align: top;把元素的顶端与行中最高元素的顶端对齐； 原文地址：https://www.52pojie.cn/t...
css去除图片间隙
qiankui的博客
09-30 8605
效果如图所示，图片下面和红线间有一行白色间隙 解决办法： 把图片转换成块状元素即可 .bannerImg{ display: block; } 去除后效果：   方法来源：https://blog.csdn.net/haibo0668/article/details/52837156...
块级元素包含行内元素（img、span等）底部多出3px间隔的解决办法
duguxueao的专栏
09-22 355
html: <div class="logo_left"><!--div的高度是83px--> <img src="images/logo.jpg"/><!--图片的高度是80px--> </div> 解决： 1.那么，为什么div的高度会比img的高度多3px呢？ 　　这是因为，行内元素后面会跟一个空白符，会使它的高度多出3px。 2.怎么解决？ 　　我在查阅验证之后总结了4种方案： 　　1. 设置div{ fon
帮我写一个旅游网站使用div-css
最新发布
10-24
这里是一个简单的例子，展示如何使用`div`和CSS来设计一个旅游网站的页面结构： ```html <!DOCTYPE html> <meta charset="UTF-8"> 旅游网站 /* CSS样式 */ body { font-family: Arial, sans-serif; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小呀小萝卜儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值