所有html元素可以看做一个盒子,相关的属性代表的意思如下:
margin:外边距
border:边框
padding:内边距
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 100px;
height: 100px;
border: 10px solid green;
padding: 30px;
margin: 100px;
text-align: center;
}
h1 {
background-color: lightgrey;
width: 100px;
height: 100px;
border: 10px solid green;
padding: 30px;
margin: 100px;
text-align: center;
}
</style>
</head>
<body>
<h1>this is a h1</h1>
<div>
this is a div
</div>
</body>
</html>
得到结果如下: