行级标签的距离_行标签之间的间距-CSDN博客

本文链接：https://blog.csdn.net/ztt0918/article/details/70738231

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