为了账号安全,请及时绑定邮箱和手机立即绑定

为什么写#box1{margin-bottom:30px;} 可以实现两个div而不写#box1{margin-bottom:30px;}#box2{margin-bottom:30px;}

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>边距</title>

<style type="text/css">

div{

    width:300px;

    height:300px;

border:1px solid red;

}

#box1{margin-bottom:30px;}

</style>

</head>

<body>

    <div id="box1">box1</div>

    <div id="box2">box2</div>   

</body>

</html>


正在回答

6 回答

margin,对应的是盒子外边界的距离。至于为什么只设置一个,可以这样想:比如两个人a,b前后紧挨着,我只需要拉开a或者b的距离就可以实现把两人的距离来开。我们把a的后面定义为底部(bottom)或者b的前面定义为顶部(top),只要将a的bottom或者b的top拉开一段距离就可以了。对应box1,也是一样的。可以修改为 box2的top:30px;

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

因为只有两个,只要第一个有下边距就可以了。同理,如果有三个

<div id="box1">box1</div>

<div id="box2">box2</div>   

<div id="box3">box3</div>,就写两个

#box1{margin-bottom:30px;}

#box2{margin-bottom:30px;}



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

#box1{margin-bottom:30px;}

表示box1和下面box2间距是30px,而

#box2{margin-bottom:30px;}

表示和box2和下面边缘距离为30px,这是距离是无限大切且不可控,属于无效代码,效果和仅仅写

#box1{margin-bottom:30px;}

的效果一样的

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

#box1{margin-bottom:30px;},设置box1这个盒子的底部外边距为30个像素,即在box1和box2之间填充了30个像素的距离。#box2{margin-bottom:30px;}是设置box2这个盒子的底部外边距为30个像素,这是没必要的。



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

边界距离就是元素与元素之间,因此只需要写一个box1就行了,默认的就是两box1与box2的距离。

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

box1的块级元素高度要再加上margin-bottom:30px; 意思 是在他的外下边界多了30px空间, 不加box2那是因为没有必要 你加下#box2{margin-bottom:30px;}  如果 再在下面添加元素就会发现位置又多了个30边距

<div id="box1">box1</div>

    <div id="box2">box2</div>   

   <div id="box3">box3</div>   

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

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1225770    人
  • 解答问题       18234    个

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

进入课程

为什么写#box1{margin-bottom:30px;} 可以实现两个div而不写#box1{margin-bottom:30px;}#box2{margin-bottom:30px;}

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信