css高级技巧——垂直对齐、去除图片底侧空白

最新推荐文章于 2023-04-16 21:09:09 发布

lvan-ah

最新推荐文章于 2023-04-16 21:09:09 发布

阅读量187

点赞数

分类专栏： css高级技巧文章标签： CSS高级技巧

本文链接：https://blog.csdn.net/weixin_43848802/article/details/103483013

版权

css高级技巧专栏收录该内容

7 篇文章 0 订阅

订阅专栏

垂直对齐

vertical-align：垂直对齐，只针对行内块元素或者行内元素

值	意思
top	顶线对齐
middle	中线对齐
bottom	底线对齐
baseline	基线对齐

在这里插入图片描述

消除图片底侧空隙

在这里插入图片描述

解决方法：

图片添加对齐vertical-align:bottom/middle/top;防止基线对齐
对块级来说display:block；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>去除图片底侧空隙</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		div {
			border: 1px solid red;
		}
		div img {
			vertical-align:bottom;
		}
	</style>
</head>
<body>
	<div><img src="images/adv.jpg" alt=""></div>
</body>
</html>

lvan学习笔记-文章内容仅个人观点
2019.12.10

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lvan-ah

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css高级技巧——垂直对齐、去除图片底侧空白

垂直对齐vertical-align：垂直对齐，只针对行内块元素或者行内元素值意思top顶线对齐middle中线对齐bottom底线对齐baseline基线对齐消除图片底侧空隙解决方法：图片添加对齐vertical-align:bottom/middle/top;防止基线对齐对块级来说display:block；<!DO...
复制链接

扫一扫