行级元素的左右边距是累加的
块级元素的上下边距取最大值
<!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>
扫一扫
947
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
