行级元素左右边距及块级元素上下边距

来源：互联网发布：计划提醒软件编辑：程序博客网时间：2024/04/29 18:55

行级元素的左右边距是累加的

块级元素的上下边距取最大值

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        *{            margin: 0;            padding: 0;        }        #span-left{            background-color: rosybrown;            margin-right: 20px;        }        #span-right{            background-color: orange;            margin-left: 30px;        }

#div-1{    width: 500px;    background-color: palegreen;    margin-bottom: 20px;}#div-2{    width: 500px;    background-color: orange;    margin-top: 30px;}
    </style>    <title>行级元素左右边距</title></head><body><!--水平排放的盒子的间距是累加的--><span id="span-left">你好！1</span><span id="span-right">你好！2</span>

<!--此时两个行级元素之间的距离为50px-->

<!--块级元素之间的上下间距取最大--><div>    <div id="div-1">上</div>    <div id="div-2">下</div></div>
<!--此时两个块级元素之间的距离为30px-->
</body></html>

0 0