盒模型

最新推荐文章于 2024-08-03 09:43:52 发布

Eric@

最新推荐文章于 2024-08-03 09:43:52 发布

阅读量95

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40615343/article/details/99485313

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

盒子模型：
在这里插入图片描述

边距设置： margin

在这里插入图片描述还有 margin:auto; 可以自动设置边距,仅水平方向有效！

边框设置： border

填充设置： padding
在这里插入图片描述

盒模型相关代码：

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