Css 边缘底部不工作

我遇到了一个令人沮丧的问题，我试图在一个链接上设置一个样式，这样它总是从它所在的框的底部显示10px。出于某种原因，我应用于它的边距底部样式不起作用……奇怪的是，边距顶部、边距右侧和边距左侧都起作用，但当我放置边距底部时，它没有注册

我肯定我错过了一些愚蠢的东西，但我花了太长时间试图找出它，尝试不同的组合，但似乎无法让它发挥作用

我已经尝试将类样式直接应用于link标记，并在链接周围包装一个段落，然后将类应用于该链接。段落方法的工作原理是，它像我想要的那样将其定位在右边，但它同样没有应用我的边距底部：10px

你知道我做错了什么吗

下面是框的html片段，以及我正在使用的css。如有任何想法/建议，将不胜感激

谢谢

HTML:

---

我想您要使用的是

填充底部

。请参阅

您使用的唯一页边距底部是

• p、 c2a，这是HTML的最后一部分，因此您不会看到任何内容，并且

• .c2action a，它仅适用于具有

  c2action

  类的元素中的

  a

  元素，但这些元素都不存在

您的问题是链接（“a”）是一个内联元素，您无法将边距设置为内联元素。为了使其工作，必须通过添加以下内容将其声明为块元素：

 a{
  display: block;
 }

但是请注意，它将保留默认的整个宽度。稍后您可能需要添加以下内容

 a{
  float: left;
  margin-left: 3px;
 }

如果这样做，则可以删除显示：块；因为通过设置float:left；您已经将其声明为块元素

---

在您的特定示例中，您可能希望为父“p”元素设置简单的填充。这两种方法都是可能的（设置显示：块或设置填充），但是第二种方法更优雅。您实际上不需要将其设置为块元素。通常，在制作链接图像时，使用第一种方法。

尝试将box类更改为：

.box{
    width:296px;
    float:left;
    background-color:#ebe1bf;
    margin-top: 20px;
    border-style: solid;
    border-width: 2px;
    border-color: #e0d6b2;
    padding-bottom:10px;
}

边距发生在背景外部，而填充发生在背景内部，因此将其放在.box类中并从框内的其他元素中删除可能更有意义

你甚至可以把填充：18px24px10px24px；并删除h2&p元素的所有其他页边距，以确保编码安全

---

和平

给出包含框的

位置：相对并给出链接
位置：绝对；底部：10px；右：20px
。请参阅。
将display属性的值设置为inline block。例如，{display:inline block}
我的
边距：3em
（例如）在除底部以外的所有侧面都有问题

html:

因此，我在另一个stackoverflow.com问答中使用了此解决方案，并附加了一个封闭div：

使用解决方案更新了html：

<div class="outer">
  <div class="mymargin">
    stuff inside
  </div>
</div>

.mymargin {
  margin: 3em;
}

.outer {
  overflow: hidden; /* from other stackoverflow answer mentioned */
}

谢谢Kelly——这就成功了，而且JSFIDLE站点也很酷！谢谢你的帮助！不幸的是，这对我不起作用。。。最后，我建议将我的框设置为相对位置，段落类的绝对位置底部为10…@mark here is js fiddle:。如果删除空的p class=“c2a”/p，那么我的代码可以工作——它是不一致的html，一个地方有一个内部p，另一个地方没有。如果你在这个例子上还需要帮助，我可以帮你，但我想你已经解决了。位置绝对的固定可能会确保你会拥有它，尽管你的代码是一致的。谢谢你的跟进，因为我很好奇，看看你的解决方案将如何工作。不幸的是，即使我在您提供的JSFIDLE链接中查看它，它仍然没有以我希望的方式显示。。。如果你看这里：你会看到我想要实现的“最终产品”…附言。使用位置绝对/相对解对我来说是一种不好的做法吗？@Mark啊，好的，这就是你想要的。我不理解你。在这种情况下，使用绝对/相对位置看起来非常合理。我个人总是尽量避免使用它，但在需要时我会毫不犹豫地使用它。永远记住回答一个问题：会出问题吗？在你的情况下，答案是肯定的，有这样一件事：。你知道这是否是个问题。如果这不仅仅是保持现状，而是如果你怀疑这可能是未来的一个问题，也许你应该重新考虑你的解决方案这对我很有效。有人投了否决票（和往常一样，没有给出任何解释），所以我只能把它归零
<div class="mymargin">
  stuff inside
</div>

.mymargin {
  margin: 3em;
}

<div class="outer">
  <div class="mymargin">
    stuff inside
  </div>
</div>

.mymargin {
  margin: 3em;
}

.outer {
  overflow: hidden; /* from other stackoverflow answer mentioned */
}