行级标签的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签的距离</title>
<!--水平排放的盒子,两者之间的距离是累加的
垂直排放的盒子,垂直间距取最大值-->
    <style>


        #span1{
            background-color: yellowgreen;


        }
        #span2{
            background-color: aquamarine;

        }
        #span3{
            background-color: yellowgreen;
            margin-right: 20px;


        }
        #span4{
            background-color: aquamarine;
            margin-left: 50px;
        }
        #span5{
            background-color: yellowgreen;
            margin-bottom: 20px;

        }
        #span6{
            background-color: aquamarine;
            margin-top: 50px;

        }
    </style>
</head>
<body>
<div>
<span id="span1">你若无伤,岁月无恙1</span><span id="span2">你若无伤,岁月无恙2</span>
    <br/>

    <!-- 水平距离:两个盒子之间的距离是70px-->
<span id="span3">你若无伤,岁月无恙1</span><span id="span4">你若无伤,岁月无恙2</span>
    <br/>

    <br/>
    <!--垂直距离: 两个盒子之间的距离是50px-->
    <div id="span5">你若无伤,岁月无恙1</div>
    <div id="span6">你若无伤,岁月无恙2</div>


</div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值