How to add margin for Twitter's Bootstrap help-block?

Question

When help-block style is used at the end of fieldset, then it looks well, but when used at the top, looks like there is no enough margin at the bottom - please see demo.

I've tried to use the following CSS:

.help-block .top {
  margin-bottom: 5px;    
}

but it doesn't help.

Answer 1

You are trying to set a margin-bottom on the .top element within .help-block

That means it is looking for a structure similar to the following:

<div class="help-block">
  <div class="top">
  </div>
</div>

You need to apply the style to the actual element. Either .top .help-block or give it its own id.

You can also specifically add a property only to the first .help-block by using an nth-child selector. However this is not supported in IE8 or below.

http://jsfiddle.net/YgUPt/1/