Question

我遇到了一个令人沮丧的问题，我试图在一个链接上设置一个样式，使它总是从它所在的盒子底部出现10px。由于某种原因，我已应用于margin-bottom样式它不起作用...奇怪的是，保证金最高，保证金权利和保证金保留一切都有效，但当我把保证金最低限度时，它没有注册。

我确信这可能是一件让我感到愚蠢的事情，但是我花了很长时间试图找出它并尝试不同的组合，但似乎无法让它发挥作用！

我已经尝试将类样式直接应用于链接标记，并且还在链接周围包装一个段落并将类应用于它。段落方法的作用是将它按照我想要的方式放在右边，但同样不是应用我的margin-bottom：10px;

关于我做错了什么的想法？

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

谢谢！

HTML：

   <div id="boxes" class="container">
        <div class="box" id="box1">
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac viverra orci. Etiam volutpat lectus vitae tellus blandit volutpat. Maecenas ante quam, scelerisque et tempor ac, varius id eros. Integer hendrerit pretium feugiat. </p>
            <a href="#" class="c2action">link</a>
        </div><!--box1-->

        <div class="box" id="box2">
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac viverra orci. Etiam volutpat lectus vitae tellus blandit volutpat. Maecenas ante quam, scelerisque et tempor ac, varius id eros. Integer hendrerit pretium feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            <p class="c2a"><a href="#">link</a></p>
        </div><!--box2-->

CSS：





     html, body, div, span, applet, object, iframe,  
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
    a, abbr, acronym, address, big, cite, code,  
    del, dfn, em, font, img, ins, kbd, q, s, samp,  
    small, strike, strong, sub, sup, tt, var,  
    b, u, i, center,  
    dl, dt, dd, ol, ul, li,  
    fieldset, form, label, legend,  
    table, caption, tbody, tfoot, thead, tr, th, td {  
        margin: 0;  
        padding: 0;  
        border: 0;  
        outline: 0;  
        font-size: 100%;  
        vertical-align: baseline;  
        background: transparent;  
    }  

    body {background: #FFFFFF; font-family: Arial, verdana, sans-serif;}

    .container {margin: 0 auto; width: 940px;}



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

    .box h2{
        font-size: 16px;
        margin-top: 18px;
        margin-left: 24px;
        color: #353535; 
    }

    .box p{
        margin-top: 10px;
        margin-left: 24px;
        width: 252px;
        font-size:13px;
        color:#525151;
    }

    p.c2a{
        text-align:right;
        margin-bottom:10px;
        font-size: 14px;
        color:#00FF00;
    }

    .c2action a {
        text-align:right;
        margin-bottom:10px;
        font-size: 14px;
        color:#FF0000;
    }

    #box1{

        margin-right: 20px;
    }

    #box2{
        margin-right: 20px;
    }

Answer 1

提供包含框position:relative;并提供链接position:absolute; bottom:10px; right:20px。请参阅http://jsfiddle.net/Ltnmv/。

Answer 2

您的问题是链接（“a”）是INLINE元素，您无法将余量设置为内联元素。为了使其工作，您必须通过添加：

将其声明为BLOCK元素

 a{
  display: block;
 }

但请注意，它将保留默认的整个宽度。您可能希望稍后添加类似

的内容

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

如果这样做，你可以删除display：block;因为通过设置float：left;你已经将它声明为块元素

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

Answer 3

我认为你想要使用的是padding-bottom。请参阅W3C documentation on the 'Box model'

Answer 4

您使用的唯一保证金是

p.c2a，这是最后一段HTML，所以你什么都看不到，
.c2action a，仅适用于a类元素中的c2action元素，但不包含这些元素。

Answer 5

尝试将您的广告系列类更改为：

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

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

你甚至可以填充：18px 24px 10px 24px;在.box上删除h2＆amp;中的所有其他边距p元素安全编码。

和平！

Answer 6

我遇到了这个问题，margin: 3em（例如）适用于除底部以外的所有侧面

html：

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

CSS：

.mymargin {
  margin: 3em;
}

所以我在另一个 stackoverflow.com 问答中使用了这个解决方案：Answer to "background color not filling entire div" 和一个额外的封闭 div：

使用解决方案更新 html：

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

将更新的 css 与解决方案相关联：

.mymargin {
  margin: 3em;
}

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

Answer 7

将display属性的值设置为inline-block，例如{display：inline-block}

保证金底部不起作用

7 个答案: