外边距和内边距
盒子模型
外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.test {
width: 100px;
height: 100px;
background: red;
/*inherit 继承*/
/*margin-left: 100px;
margin-top: 20px;*/
/* margin: 100px 0px;*/
/*margin:100px;
margin: 100px 10px 100px 200px;*/
margin: 0 auto;
/* 使得当前对象居中,网页中经常使用margin:0 auto;*/
}
</style>
<body>
<div class="test"></div>
</body>
</html>
--------------------------------------------------------------------
内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.test {
/*想让test保持原有大小:400px*400px,手动减少宽高*/
width: 300px;
height: 200px;
border: 1px solid red;
padding-left: 100px;
/*组织增生使得子元素向右移;*/
padding-top: 200px;
/*盒子模型:整个div占据网页大小:整个默认自己的宽高+内边距+边框粗细+外边距*/
}
.son {
width: 50px;
height: 50px;
background: blue;
}
</style>
<body>
<div class="test">
<div class="son"></div>
</div>
</body>
</html>