margin-bottom not working

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-wid开发者_如何学Pythonth: 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;
    }

---

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.

---

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

---

make the value of display property as inline-block .For example a {display:inline-block}

---

I think what you want to use is padding-bottom. Refer to the W3C documentation on the 'Box model'

---

The only margin-bottoms you used were on

• p.c2a, which is the last piece of HTML, so you would not see anything, and

• .c2action a, which would only apply to a elements within elements with the c2action classes, but there are none of these.

---

Try changing your box class to this:

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

The margin occurs outside the background, whereas padding occurs inside - so it might make more sense to put it on the .box class and remove it from the other elements inside the box.

You could even just put padding: 18px 24px 10px 24px; on the .box and remove all of the other margins from the h2 & p elements to safe on coding.

Peace!

---

I had this problem with the margin: 3em (for example) working for all sides except for the bottom

html:

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

css:

.mymargin {
  margin: 3em;
}

So I used this solution in another stackoverflow.com Q&A: Answer to "background color not filling entire div" with an additional enclosing div:

updated html with solution:

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

associated updated css with solution:

.mymargin {
  margin: 3em;
}

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