極限底部不工作

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元素中移除所有其他邊距以安全編碼。

和平！