2.2.8盒子模型(CSS)

最新推荐文章于 2024-08-20 13:42:14 发布

池布旁

最新推荐文章于 2024-08-20 13:42:14 发布

阅读量359

点赞数

分类专栏： CSS层叠样式表文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_63692368/article/details/123056493

版权

CSS层叠样式表专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文深入探讨了CSS中的盒子模型，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)的概念及用法。通过示例展示了如何设置不同方向的内边距和外边距，以及如何利用外边距实现元素的居中对齐。同时，文章通过代码展示了实际的HTML和CSS应用，解释了盒模型如何影响网页元素的布局。

摘要由CSDN通过智能技术生成

2.2.8盒子模型

content：内容
Padding：内边距
Border 边框
Margin：外边距

Padding ：100px 表示上下左右 4个方向都增加了100px
Padding： 100px 200px 表示的是上下、左右
padding: 100px 200px 300px; 上、左右、下
padding: 100px 200px 300px 400px;上、右、下、左

注：margin方向的用法和padding相同

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	body,div{
		padding: 0;
		margin: 0;
	}

	#one{
		width: 100px;
		height: 100px;
		background-color: red;
		border: 10px solid black;
		padding: 100px;/*内边距*/
		margin: 100px auto;/*外边距  auto表示居中一般用于margin（外边距）*/
	}

	#main{
		width: 1000px;
		height: 1000px;
		border: 1px solid black;
		background-color: blue;
	}

	</style>
</head>
<body>
<div id="main">
	<div id="one">盒子1</div>
	<div id="one">盒子2</div>
</div>
</body>
</html>

池布旁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.2.8盒子模型(CSS)

2.2.8盒子模型content：内容Padding：内边距Border 边框Margin：外边距Padding ：100px 表示上下左右 4个方向都增加了100pxPadding： 100px 200px 表示的是上下、左右padding: 100px 200px 300px; 上、左右、下padding: 100px 200px 300px 400px;上、右、下、左注：margin方向的用法和padding相同<!DOCTYPE html>&
复制链接

扫一扫

专栏目录