Question

I have the following 2 styles:

.no-bottom-margin{margin-bottom:0;}
.tab-content{border:1px solid #000;margin-bottom:1em;}

On my page I did the following:

<div class="tab-content no-bottom-margin">
     Some data here..
</div>

<div class="tab-content">
   Some data here..
</div>

The bottom margin is not removed from the first div, I can’t understand why? When I have a look at Fire Bug then then margin-bottom:0; is overwritten. I need the margin to be set to 0. How do I do this?

This sample looks stupid, but I have logic on my view that adds the style tab-content to the div, but if it is the only div on the view then I don’t want the margin there, then my design doesn’t look consistent.

Answer 1

You could try making your first CSS delcaration:

.tab-content.no-bottom-margin {
  margin-bottom: 0;
 }

Combining the classes will increase it’s specificity.

Also, you can re-order the rules so .no-bottom-margin is second – in CSS, the last rule wins.