                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

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

<!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>

Y留过长发虽未及腰

2016-01-28

源自：初识HTML(5)+CSS(3)-升级版 13-4

关注问题我要回答

9705

操作

收起

7 回答

kinpp 回答被采纳 +3 积分
2016-01-28

在#div1,#div2中设置margin-right, margin-top属性试试。

margin-right: 10px; 
margin-top: 10px;

结果图：

0 回复有任何疑惑可以回复我~

#1

Y留过长发虽未及腰提问者

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

2016-01-28 回复有任何疑惑可以回复我~

DavidEvan
2016-01-28

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

0 回复有任何疑惑可以回复我~

天边落月
2016-01-28

<!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://img1.sycdn.imooc.com//52b4113500018cf102000200.jpg" ></div>

<div><img src="http://img1.sycdn.imooc.com//52b4113500018cf102000200.jpg" ></div>

</body>

</html>

这种不知道可以吗？

0 回复有任何疑惑可以回复我~

zqbinary
2016-01-28

<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 回复有任何疑惑可以回复我~

kinpp
2016-01-28

在#div1,#div2中设置margin-right, margin-top属性试试。

margin-right: 10px; 
margin-top: 10px;

结果图：

0 回复有任何疑惑可以回复我~

Judy_xia
2016-01-28

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

1 回复有任何疑惑可以回复我~

#1

多了两个字“一个”。

2016-01-28 回复有任何疑惑可以回复我~

qq_灿_4
2016-01-28

<!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/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1226017 人
解答问题 18235 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

本课相似问答

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

2 回答为什么DIV标签和H1标签中间会有一行间隔？？？而二个DIV之间却没有·····

5 回答转成内联块级元素实现并排为什么两个元素之间有距离，都设置margin为0了啊，用浮动float：left实现这两个div之间就没有

2 回答怎么设置两个div之间的距离

4 回答为什么内联元素之间未设置间隔，却自动设置间隔

搜索更多本课相关问答

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

我要回答关注问题

意见反馈帮助中心 APP下载