问答详情
源自：12-13 距离产生美 - 使用margin为盒子设置外边距（边界）

为什么写#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>


提问者：cym01494 2017-06-27 11:16

个回答

  • san_point_water
    2017-06-27 11:43:43

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

    0
  • loucc
    2017-06-27 11:41:10

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

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

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

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

    #box1{margin-bottom:30px;}

    #box2{margin-bottom:30px;}



    0
  • 慕九州6232576
    2017-06-27 11:40:43

    #box1{margin-bottom:30px;}

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

    #box2{margin-bottom:30px;}

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

    #box1{margin-bottom:30px;}

    的效果一样的

    0
  • qq_不死鸟_5
    2017-06-27 11:39:42

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



    0
  • 慕丝1216519
    2017-06-27 11:35:43

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

    0
  • 镜里镜外都是谁
    2017-06-27 11:35:18

    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