盒子模型外边距

原创于 2025-04-07 11:54:53 发布 · 101 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<style>
			/* 初始化所有标签的内外边距,一般书写在样式的第一行 */
			*{   /* "*"通配符,指选择当前html页面中所有的标签 */
				margin: 0;
				padding: 0;
			}
			.box1{
				width: 300px;
				height: 450px;
				border: 1px solid red;
				/* margin-top: 50px;
				margin-bottom: 70px;
				margin-left: 80px;
				margin-right: 60px; */
				margin: 10px auto;   /* auto自动的 */
				/* 给盒子设置水平居中：1.盒子有大小 2.给盒子的左右外边距设置为auto */
			}
		</style>
	</head>
	<body>
		<!-- 盒子模型：内容content，边框border，内边框padding，外边距margin -->
		<div class="box1"></div>
	</body>
</htm