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

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

html css

Html 填充/边距底部不起作用，我想了解原因,html,css,margin,padding,Html,Css,Margin,Padding,我在header div中有一个header元素，但由于某些原因，我似乎无法添加任何底部边距或填充。但是，页边距/填充顶部、左侧和右侧的工作空间可以找到。这有什么原因吗？这是我的密码 html /----------------------------------------/ 我会避免使用这样的位置样式；它往往会干扰块元素彼此交互的方式。根据提供的样式和标记，我看不出填充/边距不起作用的原因；然而，您的示例实际上并没有显示应用的任何填充/边距，所以很难说会出什么问题我会这样改变你的造型： #

我在header div中有一个header元素，但由于某些原因，我似乎无法添加任何底部边距或填充。但是，页边距/填充顶部、左侧和右侧的工作空间可以找到。这有什么原因吗？这是我的密码

html

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

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

我会这样改变你的造型：

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

我会这样改变你的造型：

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

首先，请添加#for Container as in#Container in css。下面是我为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>


#容器{
位置：相对位置；
宽度：96%；
身高：98%；
左：2%；
背景色：黑色；
边界半径：10px；
盒影：0px 0px 15px 5px；
}
#标题{
位置：绝对位置；
身高：15%；
宽度：100%；
/*背景色：红色*/
边框底部：2个实心#e8e2e2；
}
#收割台h1{
字号：2.5em；
文本对齐：居中；
颜色：#e8e2e2；
边框：1px纯红；
边缘底部：10px；
}
我的网页
这里有一些文字

希望这有帮助

谢谢

首先，请添加#for Container as in#Container in css。下面是我为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>


#容器{
位置：相对位置；
宽度：96%；
身高：98%；
左：2%；
背景色：黑色；
边界半径：10px；
盒影：0px 0px 15px 5px；
}
#标题{
位置：绝对位置；
身高：15%；
宽度：100%；
/*背景色：红色*/
边框底部：2个实心#e8e2e2；
}
#收割台h1{
字号：2.5em；
文本对齐：居中；
颜色：#e8e2e2；
边框：1px纯红；
边缘底部：10px；
}
我的网页
这里有一些文字

希望这有帮助

谢谢，填充底部和边距底部确实有效，只是它不可见，因为您当前正在将#页眉的高度设置为15%，然后给它浅灰色的底部边框。这就是造成填充底部或边距底部不起作用的错觉的原因

请参见此处的工作版本

HTML

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

只需注释“页眉”的高度：15%就可以解决问题。

填充底部和边距底部确实有效，只是它不可见，因为您当前正在将“页眉”的高度设置为15%，然后给它浅灰色的底部边框。这就是造成填充底部或边距底部不起作用的错觉的原因

请参见此处的工作版本

HTML

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

只需为标题注释高度：15%，标题就能解决问题。

尝试在标题标签上添加焊盘。因为它是相对于其他容器的

#容器{
位置：相对位置；
宽度：96%；
身高：98%；
左：2%；
背景色：黑色；
边界半径：10px；
盒影：0px 0px 15px 5px；
}
#标题{
位置：相对位置；
身高：15%；
宽度：100%；
/*背景色：红色*/
边框底部：2个实心#e8e2e2；
}
#收割台h1{
位置：相对位置；
填充顶部：20px；
字号：2.5em；
文本对齐：居中；
颜色：#e8e2e2；
/*背景色：红色*/
}


我的网页

尝试将焊盘添加到标题标签的自身。因为它是相对于其他容器的

#容器{
位置：相对位置；
宽度：96%；
身高：98%；
左：2%；
背景色：黑色；
边界半径：10px；
盒影：0px 0px 15px 5px；
}
#标题{
位置：相对位置；
身高：15%；
宽度：100%；
/*背景色：红色*/
边框底部：2个实心#e8e2e2；
}
#收割台h1{
位置：相对位置；
填充顶部：20px；
字号：2.5em；
文本对齐：居中；
颜色：#e8e2e2；
/*背景色：红色*/
}


我的网页

好的，header是一个有趣的元素，它在浏览器呈现时具有独特的边距。这在大多数情况下可能会导致不必要的放置，而不会对所需的位置产生反应。我没有测试你的代码，但这可能是原因之一。尝试使用“代码片段”工具插入代码，以便我们更清楚地评估问题。另外，您在

容器

id

选择器之前缺少了一个

。哦，我不认为我复制了#，我不想复制所有内容，所以我只输入了我认为相关的代码。我只是觉得奇怪，我可以把我的头放下来，但没有上升。这和集装箱舱的高度有关吗？是的。另外，它还涉及渲染头标记的性质。它是用一些“自然”的顶部边距来呈现的。好吧，页眉是一个有趣的元素，它在浏览器呈现时具有独特的边距。这在大多数情况下可能会导致不必要的放置，而不会对所需的位置产生反应。我没有测试你的代码，但这可能是原因之一。尝试使用“代码片段”工具插入代码，以便我们更清楚地评估问题。另外，您在

容器

id

选择器之前缺少了一个

选择器。哦，我想我没有复制#，我不想复制所有内容，所以我只是

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