Html 嵌套div应用箱外边距模型_Html_Css

Html 嵌套div应用箱外边距模型

html css

Html 嵌套div应用箱外边距模型,html,css,Html,Css,当我的嵌套在中时，我在添加页边空白时遇到问题当我应用margintop:10px时，它应用于整个身体，而不是标记内部。我还使用了reset.css，如果这有帮助的话这是大学里的作业，找不到导师的答案代码： <html> <body> <header> <figure></figure> </header> </body> </html> body {

当我的

嵌套在

中时，我在添加页边空白时遇到问题

当我应用

margintop:10px

时，它应用于整个身体，而不是

标记内部。我还使用了

reset.css

，如果这有帮助的话

这是大学里的作业，找不到导师的答案

代码：

<html>
   <body>
   <header>
      <figure></figure>
   </header>
   </body>
</html>

    body {
          backround-color: #f2f2f2;
          margin:0px;
          padding:0px;
    }
    header {
           display: block;
           position: static;
           max-width: 980px;
           height: 100px;
           background: #1e1e1e;
           margin:0px auto 0px auto;
    }
    header figure {
           margin-top:10px; /** when this margin top is added it creates a margin on the full page instead of inside the header**/
           margin-left:10px;
           max-width:200px;
           height:80px;
           background:red;
    }

你所看到的叫做。将

overflow:auto

添加到标题中，以获取您所追求的行为：

header {
    display: block;
    position: static;
    max-width: 980px;
    height: 100px;
    background: #1e1e1e;
    margin:0px auto 0px auto;
    overflow:auto;
}

在

标题中添加填充
。同时使用框大小：边框框
，这将防止填充向外延伸：
header {
   display: block;
   position: static;
   max-width: 980px;
   height: 100px;
   background: #1e1e1e;
   margin:0px auto;
   padding: 10px 0 0 10px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

非常感谢您的快速回答，我马上就完成了。谢谢。我也试过添加填充物，但它确实扩展了红色框，我不知道框的大小：边框框；这是一个解决办法。也谢谢你的回答。没问题，只是一个关于j08691答案的通知，如果由于某种原因，您的内容扩展到固定标题大小以下…例如：可能您有水平链接，当浏览器变小时，它们会下降到允许的标题大小以下…overflow:auto
将导致滚动条显示在标题中。可能不会有问题（尤其是在标题中），但需要注意的是。@JWoods更正，您现在可以滚动，关于溢出的问题是它只包含行为，而没有修复它。“自动”行为是当出现溢出时，浏览器将添加滚动条，以便您可以滚动查看更多内容。您可以使用overflow:hidden
，它不会添加滚动条，但也会导致问题。如果你的标题中有一个下拉菜单，设置为overflow:hidden
，如果它超出标题的高度，该菜单将被切断。是的，我确实得到了滚动条，显示了我不能作为项目主标题的滚动条。我应用了你的解决方案，但仍然有一些问题，但我认为我的主要问题是reset.css，因为我取出了它，然后你的解决方案工作了。再次谢谢你是的，没问题。就我个人而言，我并不认为重置是必要的。我应用边距：0；填充：0到页面上的每个元素，这几乎就是您所需要的，因为您可以自己设计其他元素的样式