Margin-Border-Padding

最新推荐文章于 2020-10-06 08:30:00 发布

fssssssss

最新推荐文章于 2020-10-06 08:30:00 发布

阅读量838

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css+js

本文链接：https://blog.youkuaiyun.com/fssssssss/article/details/38198035

html+css+js 专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了CSS中用于布局和间距控制的关键属性，包括margin、border和padding的应用技巧，并提供了具体的示例帮助理解这些概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1" />
</head>
<style type="text/css">
	.margin-border-padding{
		word-break:break-all;
		height:150px;
		background-color: yellow;
		margin: 0px 20px 30px 40px;
		border: 3px solid red;
		border-top-style:dashed;
		padding: 30px 20px 6px 10px;/*上右下左*/
	}
</style>
<body>
<!--
	margin:表示当前div与外界
	border:表示当前div的边框
	padding:表示当前div与内部

-->
	<div style="height:200px;width:200px;background-color:gray">
		<div class="margin-border-padding">
				<div>alskjaksjg;akjsg;lakalskjg;agasgasgj;askjg;aksjg;akjsg;lak</div>
		</div>
	<div>	
</body>
</html>

如果要让div水平居中可以设置：

margin:auto

或者margin:0px auto

或者margin:0px auto 0px;

如果一个div的长宽是300px,padding=10px，border=20px，margin=30px。则整个长宽是300+10+20+30=360px。