Question

我在标题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;*/

}

Answer 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*/
}

Answer 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>

Answer 3

首先，请在css的#Container中添加#for 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>

希望这有帮助。

由于

Answer 4

填充底部和边距底部确实有效，只是它不可见，因为您目前正在将#Header的高度设置为15％然后给它那么轻灰色底部边框。这就是假设填充底部或边缘底部不起作用的原因。

请在此处查看工作版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%即可解决此问题。

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

4 个答案: