边框的作用之产生相对margin

.parent{

width:200px;

height: 100px;

background:blue;

//border: 1px solid black; 如果不加边框,子元素的margin 会扩展到父元素上,

//结果就是父元素产生了margin,而子元素跟着移动了. 如果父元素有了边框,那么

//子元素的margin 就会产生正常的结果.

}

.child{

width:50px;

height:50px;

background:red;

margin-top:30px;

}

<div class="parent">

<div class="child"></div>

</div>