div入门之盒子模型，边界margin,填充padding,框边border

最新推荐文章于 2023-05-21 10:57:23 发布

最爱林丽明小姐

最新推荐文章于 2023-05-21 10:57:23 发布

阅读量3.3k

点赞数

分类专栏： div+css的应用

本文链接：https://blog.csdn.net/kissme_a/article/details/18913573

版权

div+css的应用专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一个div分为边界，框边，还有内部，内部有内容到边框的距离padding

marigin符合样式

margin-top;

margin-right;

margin-top;

maigin-bottom;

注：可取负值。

padding符合样式

padding-top;

padding-right;

padding-bottom;

padding-left;

//style.css
#first{
	width:200px;
	height:100px;
	background:green;
	margin:20px;
	float:left;
}


#second{
	width:100px;
	height:150px;
	background:blue;
	border:30px red solid;
	padding-left:20px;
	padding-top:30px;
	float:left;
}

<html>
<head>
	<title>div盒子模型</title>
	<link rel = "stylesheet" href = "style.css" type = "css/style.css"/>
</head>
<body>
	<div id="first">这是一个div</div>
	<div id="second">这是另一个咯</div>
</body>
</html>