极限底部不工作

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

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

Answer 3

您使用的唯一保证金裤是上

• p.c2a，这是HTML的最后一块，所以你不会看到任何东西，

• 。 c2action a，它只适用于a元素内元素与c2action类，但没有这些。

Answer 4

您的问题是链接（“a”）是一个INLINE元素，您不能将边距设置为内联元素。为了使其工作，你必须将其声明为块级元素，加入：

a{ 
    display: block; 
} 

但是请注意，然后它会保留作为默认整个宽度。您可能希望稍后添加类似于

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

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

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

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上，并从p元素中移除所有其他边距以安全编码。

和平！