CSS三像素

最新推荐文章于 2024-05-17 11:15:23 发布

m0_51530332

最新推荐文章于 2024-05-17 11:15:23 发布

阅读量220

点赞数

分类专栏： css三像素文章标签： css

本文链接：https://blog.csdn.net/m0_51530332/article/details/109059157

版权

css三像素专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS三像素

当外面盒子没给高度时，盒子里面的img自己的高度会撑开盒子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body{
		border: 1px solid red;
	}
	</style>
</head>
<body>
	<img src="img/yao.jpg">
</body>
</html>

如图所示：

因为img是行内块元素，所以这时会发现图片与盒子的底部会有间距。这就是三像素问题。

这时就要通过代码来解决了：

//方法一
img {
      //将img转换为块级元素
      display:biock;
}

//方法二:
img {
      //基线对齐
      vertical-align: middle;
}

优惠劵

m0_51530332

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS三像素

CSS三像素当外面盒子没给高度时，盒子里面的img自己的高度会撑开盒子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body{ border: 1px solid red; } </style></head><body>
复制链接

扫一扫