填充/边距底部不起作用，我想了解原因答案

【问题标题】：padding/margin bottom not working, i want to understand why填充/边距底部不起作用，我想了解原因
【发布时间】：2016-12-01 09:51:51
【问题描述】：

我在标题 div 中有一个标题元素，但由于某种原因，我似乎无法为其添加任何底部边距或填充。然而，边距/填充顶部、左侧和右侧工作都可以找到。是否有一个原因？这是我的代码。

html

<div id="Container">
<div id="Header">  
   <h1>My Webpage</h1>
 </div>
</div>

css

#Container {

position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;

}

/----------------------------------------/

#Header {

position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;

}

#Header h1 {

font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/

}

【问题讨论】：

嗯，标题是一个有趣的元素，它在被浏览器呈现时具有独特的边距。这可能会导致大多数时候出现不需要的放置，而不是对所需的位置产生反应。我没有测试您的代码，但这可能是原因之一。尝试使用“code sn-p”工具插入您的代码，以便我们更清楚地评估问题。此外，您在Container id 选择器之前缺少#。
哦，我不认为我复制了#，我不想复制所有内容，所以我只是输入了我认为相关的代码。我只是觉得奇怪的是我可以把我的头放下但不能向上。是不是跟容器div的高度有关？
是的。它也与渲染标题标签的“性质”有关。它以一些“自然”的上边距呈现。

标签： html css margin padding

【解决方案1】：

我会避免使用这样的位置样式；它往往会干扰块元素相互交互的方式。根据提供的样式和标记，我看不出填充/边距不起作用的原因；但是您的示例实际上并没有显示应用了任何填充/边距，因此很难说可能出了什么问题。

我会这样改变你的风格：

#Container {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    background-color: black;
    border-radius: 10px;
    box-shadow: 0px 0px 15px 5px;
}

#Header {
    height: 15%; /* This should really be a static number, not a percentage*/
    width: 100%;
    border-bottom: 2px solid #e8e2e2;
    margin-bottom: 20px; /* This will push elements below your header div down by 20 px*/
}

【讨论】：

好词“因此”+1
嘿，感谢您指出自动边距，比左边更有效的方法，但边距底部无效，我似乎无法向上推任何东西
margin-bottom 并不是要向上推，而是要向下推。因此，如果您的元素下方没有任何内容，则 margin-bottom 为 0 看起来与 margin-bottom 为 100 没有什么不同，因为它没有任何效果。如果您希望将元素向上移动，相对于它通常的位置，您可以使用带负值的 margin-top
@Redit0 绝对精彩的评论...我学到了一些新东西，并且对 css 的理解稍微好一点：p

【解决方案2】：

尝试添加填充到标题标签的自我。因为它是相对于其他容器的。

#Container {
position:relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;

}

#Header {
position:relative;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;

}

#Header h1 {
    position:relative;
padding-top:20px;
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/

}

<div id="Container">
<div id="Header">  
   <h1>My Webpage</h1>
 </div>
</div>

【讨论】：

【解决方案3】：

首先，请在css中添加#for Container，就像#Container一样。下面是我为 h1 添加边距底部的代码。如果您还有任何问题，请告诉我。

    <html>
    <head>
    <style type="text/css">
    #Container {
    position: relative;
    width: 96%;
    height: 98%;
    left:2%;
    background-color: black;
    border-radius: 10px;
    box-shadow: 0px 0px 15px 5px;
    }
    #Header {

    position: absolute;
    height: 15%;
    width: 100%;
    /*background-color: red;*/
    border-bottom: 2px solid #e8e2e2;

    }

    #Header h1 {
    font-size: 2.5em;
    text-align: center;
    color:#e8e2e2;
    border:1px solid red;
    margin-bottom:10px;
    }
    </style>
    </head>
    <body>

    <div id="Container">
    <div id="Header">  
       <h1>My Webpage</h1>
       <p>some text here</p>
     </div>
    </div>

    </body>
    </html>

希望这会有所帮助。

谢谢

【讨论】：

【解决方案4】：

Padding-bottom 和 margin-bottom 确实有效，只是它不可见，因为您当前将 #Header 的高度设置为 15%，然后为其赋予浅灰色底部边框。这就是 padding-bottom 或 margin-bottom 不起作用的错觉。

在此处查看工作版本http://codepen.io/sajadtorkamani/pen/zxxzgo

HTML

<div id="Container">
  <div id="Header">  
    <h1>My Webpage</h1>
  </div>
</div>

CSS

Container {
  position: relative;
  width: 96%;
  height: 98%;
  left:2%;
  background-color: black;
  border-radius: 10px;
  box-shadow: 0px 0px 15px 5px;
}

#Header {
  position: absolute;
  /* height: 15%; */
  width: 100%;
  /*background-color: red;*/
  border-bottom: 2px solid #e8e2e2;
}

#Header h1 {
  font-size: 2.5em;
  text-align: center;
  color:#e8e2e2;
  padding-bottom: 20px;
  /*background-color: red;*/
}

只需为#Header 注释掉height: 15% 即可解决问题。

【讨论】：

嘿，谢谢，这不是我希望发生的事情，我只是想知道我是否可以使用边距/填充/底部将标题放置在任何地方。但是我很惊讶它仍然可以在没有高度的情况下工作，我认为您应该始终为您的 div 设置宽度和高度，不是这样吗？
设置宽度或高度并不总是这样，但有时它可能是个好主意。通常不是一个好主意是以百分比设置元素的高度，其父元素没有明确的高度。在这种情况下，元素将具有其内容的高度。这就是#Container（#Header 的父级）具有百分比而不是显式高度的情况。这篇文章可能会有所帮助：stackoverflow.com/questions/1622027/…