margin:两个盒子之间的距离
可以使用
<style>
div{
margin:20px;
}
</style>
这样子的话,所有的div的边距都是20px的距离
如果使用#test{
margin:20px;
}
那么id为test的标签则为20px
但是这种指定方法是标签的四个方向都指定为20px,如果需要指定上下左右,则可以使用
margin-top:20px;
margin-right:30px;
margin-botton:40px;
margin-left:50px;
可以这样设置,或者也可以只用以下的方式来设置
margin:10px,20px,那么上下都是10px,左右都是20px.因为是先从上面开始分配,然后顺时针分配,如果没分配到的话,则取对边的值。
如果是margin:10px,20px,30px.那么上下分别是10px,30px,左右是20px
如果是margin:10px,20px,30px,40px,那么上下左右分别是10px,30px,20px,40px.
<style>
#cont{
width:1000px;
height:600px;
background: green;
}
div {
width:400px;
height:200px;
float:left;
}
#test{
/*
margin:10px;
*/
/*
margin-top:10px;
margin-left: 20px;
margin-bottom: 30px;
margin-right: 40px;
*/
/*margin:10px 20px;*/
margin: 10px 20px 30px;
background: red;
}
#test2 {
background: orange;
}
#test3{
width:1000px;
background: blue;
}
</style>
</head>
<body>
<div id="cont">
<div id="test"></div>
<div id="test2"></div>
<div id="test3"></div>
</div>
</body>
</html>
可以使用
<style>
div{
margin:20px;
}
</style>
这样子的话,所有的div的边距都是20px的距离
如果使用#test{
margin:20px;
}
那么id为test的标签则为20px
但是这种指定方法是标签的四个方向都指定为20px,如果需要指定上下左右,则可以使用
margin-top:20px;
margin-right:30px;
margin-botton:40px;
margin-left:50px;
可以这样设置,或者也可以只用以下的方式来设置
margin:10px,20px,那么上下都是10px,左右都是20px.因为是先从上面开始分配,然后顺时针分配,如果没分配到的话,则取对边的值。
如果是margin:10px,20px,30px.那么上下分别是10px,30px,左右是20px
如果是margin:10px,20px,30px,40px,那么上下左右分别是10px,30px,20px,40px.
<style>
#cont{
width:1000px;
height:600px;
background: green;
}
div {
width:400px;
height:200px;
float:left;
}
#test{
/*
margin:10px;
*/
/*
margin-top:10px;
margin-left: 20px;
margin-bottom: 30px;
margin-right: 40px;
*/
/*margin:10px 20px;*/
margin: 10px 20px 30px;
background: red;
}
#test2 {
background: orange;
}
#test3{
width:1000px;
background: blue;
}
</style>
</head>
<body>
<div id="cont">
<div id="test"></div>
<div id="test2"></div>
<div id="test3"></div>
</div>
</body>
</html>