padding对背景图片位置的影响

最新推荐文章于 2024-04-04 02:15:35 发布

原创最新推荐文章于 2024-04-04 02:15:35 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

本文探讨了在CSS样式中，设置元素的padding如何影响背景图片的位置。通过实例解析，展示了不同padding值下，背景图片在元素内部的显示效果变化，帮助开发者更好地控制元素内容与背景图片的布局。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box {
			width: 800px;
			height: 800px;
			background-image: url(01.jpg);
			background-repeat: no-repeat;
			background-color: #ccc;
			font: 700 50px "Microsoft Yahei";
			/*text-align: right;*/
			color: #eee;
			margin: 20px auto;
			padding: 30px;
		}
	</style>

</head>
<body>
	<div class="box">
		新垣结衣
	</div>
</body>
</html>