当margin或者padding取值是百分比的时候,无论是left,right或者top,bottom, 都是以父元素的width为参考的
<!DOCTYPE html>
<html>
<head>
<style>
#parent{
position: relative;
width: 400px;
height: 300px;
margin: 200px;
padding: 100px;
box-sizing: content-box;
}
#child {
width: 50%;
height: 50%;
margin: 10%;
padding: 10%;
box-sizing: content-box;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">this is child</div>
</div>
</body>
</html>