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

来源:12-13 距离产生美 - 使用margin为盒子设置外边距(边界)

cym01494

2017-06-27 11:16

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


写回答 关注

5回答

  • 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;

  • 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;}



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

    #box1{margin-bottom:30px;}

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

    #box2{margin-bottom:30px;}

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

    #box1{margin-bottom:30px;}

    的效果一样的

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

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



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

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

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

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

1222461 学习 · 18209 问题

查看课程

相似问题