身体元素的填充增加了值

Question

我正在尝试这样做，以便我可以使用填充等在页面中间获取我的身体部分。但是由于某种原因，它自己的盒子不会在中间。我不确定我是否以正确的方式进行，但是当你看到代码时。主要部分称为“部分”这是我的主体，我将拥有所有文本等。

主要代码：

http://codepen.io/Blindeagle141/pen/mVpYyM

如你所见。蓝框仍然在左侧。我需要将它放在页面的中心，如下所示：

  -----------------------------------------------
|    |                                 |       |                    
|-----------------------------------------------                        
|    |Logo                      Nav Bar|       |
|-----------------------------------------------                        
|    |                                 |       |                   
|    |                                 |       |                    
|    |               Body              |       |                
|    |                                 |       |                    
|    |                                 |       |                    
|-----------------------------------------------                        
|    |Logo                        Info |       |
|-----------------------------------------------                        
|    |                                 |       |                    
 -----------------------------------------------

Answer 1

要使div水平居中，请将填充属性替换为margin: 0px auto

如果您希望它低于标题，您还需要指定垂直边距，例如margin: 150px auto 0px auto

基本上，填充会在div中移动标记，因此背景颜色仍然会跨越填充。如果要移动整个div的边界，请使用margin。这称为盒子模型，用它作为定位的参考。

Answer 2

我们需要检查的第一件事是填充的用法，它用于设置内容到元素边界的距离，这里：

<section>
  <p>Body</p>
</section>

填充将设置<p>body</p>与元素<section></section>的距离。我们想要的是设置<section></section>到其父级的距离，而不是像这样填充使用边距：

section{
    background-color: cornflowerblue;
    height: 100px;
    width: 200px;
    margin: 0 auto;
}

这会将<section></section>元素放在中心位置。