去除div中img元素四周的白边问题：

最新推荐文章于 2024-04-30 11:03:18 发布

C老大

最新推荐文章于 2024-04-30 11:03:18 发布

阅读量3.5k

点赞数 1

分类专栏：前端踩坑文章标签： css

本文链接：https://blog.csdn.net/qq_41571838/article/details/109105947

版权

去除div中img元素四周的白边问题：原图如下：可以发现图片周围有一圈白色边框(不确定是什么但像是边框)；在做了如下尝试后均无果：1）img在div中的白边就是因为inline-block；造成的，所以此时将img的display设置为block；白边就消失了2)vertical-align:top | bottom | middle3）......我的如下：原理：1. 把图片拉大一点超出父盒子，然后超出的部分隐藏;(解决了右边和下边) 2. 设...

摘要由CSDN通过智能技术生成

去除div中img元素四周的白边问题：

原图如下：可以发现图片周围有一圈白色边框(不确定是什么但像是边框)；

在做了如下尝试后均无果：

1）img在div中的白边就是因为inline-block；造成的，

所以此时将img的display设置为block；白边就消失了

2)vertical-align:top | bottom | middle

3）......

我的如下：

原理：1. 把图片拉大一点超出父盒子，然后超出的部分隐藏;(解决了右边和下边)

2. 设置图片定位向上和左偏一点点.(解决了上边和左边)

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#outer{
				margin: 50px auto;
				width: 391px;
				height: 272px;
				border: 20px solid;
				border-top-color:rgb(106,92,27) ;
				border-ri

最低0.47元/天解锁文章

C老大

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
去除div中img元素四周的白边问题：

去除div中img元素四周的白边问题：原图如下：可以发现图片周围有一圈白色边框(不确定是什么但像是边框)；在做了如下尝试后均无果：1）img在div中的白边就是因为inline-block；造成的，所以此时将img的display设置为block；白边就消失了2)vertical-align:top | bottom | middle3）......我的如下：原理：1. 把图片拉大一点超出父盒子，然后超出的部分隐藏;(解决了右边和下边) 2. 设...
复制链接

扫一扫