css样式学习5

块级元素的上下边距

垂直摆放的盒子，垂直间距是合并的（取最大值）

例如，存在两个div，以下是两个div的css样式

#div1{
    height: 100px;
    background-color: red;
    margin-bottom: 20px;
}
#div2{
    height: 100px;
    background-color: yellow;
    margin-top: 30px;

，则这两个div的上下间距是30px

行级元素的左右边距

水平摆放的盒子，水平间距是margin的累加

例如，存在两个div，以下是两个div的css样式

*{
    margin: 30px;
    padding: 20px;
}
#s1{
    background-color: #ea2000;
}
#s2{
    background-color: aqua;
}

，则这两个div的左右边距是60px