文章/答案/技术大牛

发布

问CSS页面布局
EN

Stack Overflow用户

提问于 2014-04-03 03:09:23

回答 2查看 44关注 0票数 0

下面是代码。当我尝试向内框添加边距: 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>

css

layout

回答 2

Stack Overflow用户

发布于 2014-04-03 03:12:44

Try overflow:hidden;属性设置为div外部

.outer{
  overflow:hidden;
}

票数 0

Stack Overflow用户

发布于 2014-04-03 03:57:40

两个简单的解决方案：

.outer{
   padding:50px;
}

或者2.

.outer{
  overflow:hidden;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22820793

复制

相似问题

问CSS页面布局
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS页面布局EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS页面布局
EN