CSS_边距填充

最新推荐文章于 2022-08-12 16:44:03 发布

hello~bye~

最新推荐文章于 2022-08-12 16:44:03 发布

阅读量496

点赞数

分类专栏：前端（HTML、css）文章标签： css 边距 margin padding

本文链接：https://blog.csdn.net/qq_36654309/article/details/109773853

版权

前端（HTML、css）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

边距：元素与元素之间的距离。（无法靠近）

填充：指向一个元素的内部，增加空间，（内边距）,与外边距不同，填充会改变元素的大小。随着填充的增加，元素会被撑大。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0; /*将所有的元素边距都设置为0*/
			}
			#box {
				width: 870px;
				overflow: auto;
				margin: auto; /*让父元素自动设置边距，左右边距相等，即可达到居中效果，水平方向有效。*/
			}
			.item {
				float:left;
				margin: 20px;
				border: 5px solid black;
				padding: 15px;
			}
			
		</style>
	</head>
	<body>
		<div id="box">
			<div class="item">
				<img src="imgs/01.png"><br>
				测试文字内容
			</div>
			<div class="item">
				<img src="imgs/02.png" ><br>
				测试文字内容
			</div>
			<div class="item">
				<img src="imgs/03.png" ><br>
				测试文字内容
			</div>
		</div>
	</body>
</html>

hello~bye~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS_边距填充

边距：元素与元素之间的距离。（无法靠近）填充：指向一个元素的内部，增加空间，（内边距）,与外边距不同，填充会改变元素的大小。随着填充的增加，元素会被撑大。示例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; /*将
复制链接

扫一扫

专栏目录