51

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;
    }

7 Answers 7

36

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.

5
  • Unfortunately that didn't work for me... I ended up using the suggestion of making my box have a position relative, and the paragraph class having an absolute position with a bottom of 10...
    – Mark
    Commented Aug 26, 2011 at 14:37
  • @mark here is js fiddle: jsfiddle.net/gU8WP . If you remove your empty p class="c2a" /p then my code works - it is inconsistent html, in one place you have a inside p, in the second one you don't. If you still need help on this example i can help you, but I guess you have fixed it. The fix with position absolute will probably ensure you will have it as you wanted - consider though make your code consistent.
    – mkk
    Commented Aug 26, 2011 at 14:43
  • thanks for following up, as I am curious to see how your solution would work as well. Unfortunately even when I look at it in the jsfiddle link you provided it's still not displaying the way I would want... if you look here: jsfiddle.net/Ltnmv you will see the 'final product' I was looking to achieve...
    – Mark
    Commented Aug 26, 2011 at 15:29
  • p.s. is it bad practice for me to be using the position absolute/relative solution?
    – Mark
    Commented Aug 26, 2011 at 15:30
  • @Mark ah ok, that's what you wanted. I missunderstood you. Using position absolute/relative looks very reasonable in that case. I personally always try to avoid it, but I do not hesitate to use it when needed. Always remember to answer a question: can something go wrong? In your case the answer is yes, there is such thing: jsfiddle.net/Ltnmv/1 . you know whether it is a problem or not. If it's not just leave as it is, but if you suspect that it might be an issue in the future, probably you should reconsider your solution
    – mkk
    Commented Aug 26, 2011 at 20:11
24

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

2
  • Thanks Kelly--that did the trick, and that jsfiddle site is cool too! Thanks for your help!
    – Mark
    Commented Aug 26, 2011 at 14:36
  • Here is just other alternative, not an explanation why margin-bottom is not working Commented Jul 7, 2022 at 15:53
9

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

1
  • 2
    this worked for me on a span. Somebody had downvoted (without giving any explanation, as usual), so I could only put it back to zero
    – Francis
    Commented Jan 30, 2020 at 12:54
2

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!

1

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

1

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.

1

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 */
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.