行級元素左右邊距及塊級元素上下邊距

枕夢發表於2017-04-28
行級元素的左右邊距是累加的
塊級元素的上下邊距取最大值


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

相關文章