保证金底部不起作用

Question

我有一个令人沮丧的问题,我试图在一个链接上设置一个样式,使它总是从它所在的盒子底部出现10px.由于某种原因,我应用于它的边缘底部样式不是工作...奇怪的是,保证金顶部,保证金权利和保证金留下全部工作,但当我把保证金底部没有登记.

我敢肯定这可能是我想念的蠢事,但是我花了很长时间试图找出它并尝试不同的组合,但似乎无法让它起作用!

我已经尝试将类样式直接应用于链接标记,并且还在链接周围包装一个段落并将类应用于它.段落方法的作用是将它按照我想要的方式放在右边,但同样不是应用我的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

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