边距底部不起作用？答案

【问题标题】：margin-bottom not working?边距底部不起作用？
【发布时间】：2011-05-10 04:49:09
【问题描述】：

由于某种原因，我在让页面底部有一些填充时遇到了麻烦。我有一个内容框，它到达页面的末尾并到达底部，看起来不是最好的。我想从页面底部留出一些空间来解决这个问题，但似乎 margin-bottom 没有像我预期的那样工作？我已经包含了以下代码，它应该是影响内容框的所有内容。我已经尝试删除 html/body 中的 margin:0 （即使我有点需要），但这似乎也不起作用？我觉得我错过了一些非常明显的东西。

html, body {
margin:0;
padding:0;
width:100%;
height:100%;
text-align:left;}

#content {
position: absolute;
left: 50%;
margin-left: -368px;
top: 104px;
padding-left: 35px;
padding-right: 35px;
padding-top: 15px;
padding-bottom: 15px;
background-color: white;
border: 1px solid black;
width: 664px;
margin-bottom: 20px;}

任何帮助将不胜感激 :) 谢谢！

实时链接 - http://quintinmarcus.com/portfolio/

【问题讨论】：

你能解释一下你在这里做什么吗？为什么你有内容绝对定位？您不能在绝对定位的对象上使用边距，因为它不会影响其他元素，因为它基本上已从流程中取出。
另外margin-left:-3680px 似乎有点疯狂
对不起-3680，应该是-368，我修好了。它水平居中内容。我将它绝对定位，因为它位于图像之上。我正在使用一些 CSS 在调整浏览器大小时重新缩放图像，因此它可以作为我的背景。有什么办法仍然可以在底部获得某种形式的边距？
你能提供一个实时链接或在 jsfiddle.net 上放一些东西吗？如果我们有一些东西可以看和玩，那么帮助你会更容易。
quintinmarcus.com/portfolio

标签： html css web padding margins

【解决方案1】：

由于content 有position: absolute，它的后边距不做任何事情，也不应该拉伸身体的内部高度，以便身体的 padding-bottom 做任何事情。

【讨论】：

嗯，很好的 padding-bottom 肯定是有效的，当我增加它以获得更多填充时，盒子会在底部增长。我尝试切换位置，但这也没有使保证金底部工作......
请仔细阅读。只要元素是绝对定位的，元素的 margin-bottom 和 body 的 padding-bottom 都不会做任何事情，因为绝对定位的元素不会影响其兄弟姐妹或祖先的布局。那么，为什么元素首先绝对定位呢？
我仔细阅读并解释说填充适用于绝对定位的东西。我明白你所说的边距底部。元素是绝对定位的，因为它位于图像的顶部。
你说的是 element 的 padding-bottom，我说的是 body 的 padding-bottom，也就是你在找什么。为什么不将图像绝对而不是元素，或者将其定义为背景？

【解决方案2】：

如果您想使布局居中，请将 #content 的当前样式修改为以下内容：

CSS：

#content {
width:664px;
margin:104 auto 20px auto;
padding: 15px 35px;
background-color: white;
border: 1px solid black;
}

这也将使您能够在所需的底部提供边距。

【讨论】：

这也是居中，但仍然不会给我下边距，即使我在之后使用 margin-bottom ？
你能提供一个实时链接或在 jsfiddle.net 上放一些东西吗？如果我们有一些东西可以看和玩，那么帮助你会更容易。