想让每个div块之间都有间隔怎么实现？-慕课网

想让每个div块之间都有间隔怎么实现？

来源：13-4 起飞咯 - 浮动模型

Y留过长发虽未及腰

2016-01-28 21:14

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动模型</title>
<style type="text/css">
#div3{    
    border:5px pink solid;
    width:605px;
    height:20px;
    inline-block;
    background-color:Cyan;
}
 #div1,#div2{border:5px yellow solid;
    width:300px;
    height:80px;   
	inline-block;
    background-color:chartreuse;
    float:left;}
</style>
</head>
<body>
<div id="div3">导航条</div>
 
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>

</body>
</html>

写回答关注

7回答

kinpp

2016-01-28 21:36:54

已采纳
在#div1,#div2中设置margin-right, margin-top属性试试。
```
margin-right: 10px; 
margin-top: 10px;
```
结果图：
1 0

Y留过长发虽...

非常感谢！是我想要的样子

2016-01-28 23:20:59

共 1 条回复 >
DavidEvan

2016-01-28 21:43:38

margin可以设置周边距你给的这个例子的话只要加上#div3｛margin-bottom：？px｝#div1｛margin-bottom：？px｝即可

0 0
天边落月

2016-01-28 21:41:16

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>对齐</title>
<style type="text/css">
div{text-align:center;}
div{line-height:8em;}
</style>
</head>
<body>
<div><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></div>
<div><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></div>
</body>
</html>
这种不知道可以吗？

0 0
zqbinary

2016-01-28 21:39:59

<style type="text/css">
#div3{
margin:10px; /*随便加了10px，是不是你想要的效果*/
border:5px pink solid;
width:605px;
height:20px;
inline-block;
background-color:Cyan;
}
#div1,#div2{
margin:10px; /*随便加了10px，是不是你想要的效果*/
border:5px yellow solid;
width:300px;
height:80px;
inline-block;
background-color:chartreuse;
float:left;}
</style>

0 0
kinpp

2016-01-28 21:36:59
在#div1,#div2中设置margin-right, margin-top属性试试。
```
margin-right: 10px; 
margin-top: 10px;
```
结果图：
0 0
Judy_xia

2016-01-28 21:35:23

用一个一个大的div包括所有小的div，给大的div设置一个外边距（margin）即可。已试验过。

1 1

Judy_x...

多了两个字“一个”。

2016-01-28 21:36:46

共 1 条回复 >
qq_灿_4

2016-01-28 21:35:13

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动模型</title>
<style type="text/css">
#div3{
border:5px pink solid;
width:605px;
height:20px;
inline-block;
background-color:Cyan;
margin-bottom: 10px;
}
#div1,#div2{border:5px yellow solid;
width:300px;
height:80px;
inline-block;
background-color:chartreuse;
float:left;
}
#div1{
margin-right: 10px;
}
</style>
</head>
<body>
<div id="div3">导航条</div>

<div id="div1">栏目1</div>
<div id="div2">栏目2</div>

</body>
</html>


0 0