margin-bottom not working

Question

I'm having a frustrating problem where I'm trying to set a style on a link so that it always appears 10px from the bottom of the box it is in. For some reason the margin-bottom style I have applied to it is not working...the weird thing is that margin-top, margin-right and margin-left all work, but when I put margin-bottom it doesn't register.

I'm sure it's likely something stupid I'm missing, but I've spent far too long trying to figure out it and trying different combos but can't seem to get it to work!

I've tried applying the class style directly to the link tag, and also wrapping a paragraph day around the link and applying the class to it. The paragraph method works in that it positions it to the right like I want, but again it is not applying my margin-bottom: 10px;

Any ideas as to what I'm doing wrong?

Below are snippets of the html for the boxes, as well as the css I'm using. Any thoughts/suggestions would be greatly appreciated!

Thanks!

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

Give the containing box position:relative; and give the links position:absolute; bottom:10px; right:20px. See https://jsfiddle.net/Ltnmv/.

Answer 2

Your problem is that link ("a") is an INLINE element and you cannot set margin to inlines elements. In order to make it work, you have to declare it as BLOCK element, by adding:

 a{   display: block;  } 

however be aware then it will reserve as default whole width. You might want later to add something like

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

If you do so, you can delete display: block; because by setting float: left; you already declare it as a block element

In your particular example, you might want to simple set padding for your parent "p" element. Both approaches are possible (setting display: block or setting padding), however the second one is more elegant. You don't really need to make it block element. Usually you use the first approach when you want to make a link image.