05.盒子模型-外边距
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:200px;
height:200px;
background-color: #bfa;
border:10px red solid;
/*
外边距（margin）
- 外边距不会影响盒子可见框的大小
- 但是外边距会影响盒子的位置
- 一共有四个方向的外边距：
margin-top
-上外边距，设置一个正值，元素会向下移动
margin-right
- 默认情况下设置margin-right不会产生任何效果
margin-bottom
- 下外边距，设置一个正值，其下边的元素会向下移动
margin-left
-左外边距，设置一个正值，元素会向右移动
- margin也可以设置负值，如果是负值则元素会向相反的方向移动
- 元素在页面中是按照自左向右的顺序排列的，
所以默认情况下如果我们设置左和上外边距则会移动元素自身
而设置下和右外边距会移动其他元素
- margin的简写属性
margin 可以同时设置四个方向的外边距，用法和padding一样
margin:100px;
- margin会影响到盒子实际占用空间
*/
margin-top:100px;
margin-left:100px;
margin-bottom:100px;
/* margin-top:100px; margin-top:-100px; margin-top不会变为0，而是等于-100px */
margin-top:-100px;
margin-left:-100px;
margin-bottom:-120px;
margin-right:0px;
}
.box2{
width:220px;
height:220px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">hello</div>
</body>
</html>
标签：盒子,05,top,元素,100px,设置,外边,margin 来源： https://www.cnblogs.com/sherryyuan/p/16365322.html