下面是代码。当我试图将 margin:50px 添加到内框时，外框也从顶部移动 50px。我认为只有内框应该从顶部移动 50px。但它给出了不同的结果。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>calculating element dimensions</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
div, p {
margin: 0;
padding:0;
}
html {
background: #ccc;
}
.outer {
width: 600px;
margin: 0 auto;
background: #9CF;
}
.box{
background: #B7D19C;
width: 400px;
padding: 50px;
border: 2px solid black;
}
p {
background: #EEA458;
height: 100%;
}
/*add styles here*/
</style>
</head>
<body>
<div class="outer">
<div class="box">
<p>Here we'll need to calculate the width of this interior div element. This may seem simple at first, but as we begin to add box model properties, and as the overall width of the parent element and the div conflict with one another, we'll need to understand how each of the properties combine to effect the overall width (and height) of page elements.</p>
</div>
</div>
</body>
</html>
最佳答案
尝试将 overflow:hidden; 属性添加到 div 外部
.outer{
overflow:hidden;
}
关于CSS 页面布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22820793/