Question

I have a paragraph of text, sitting in a p-tag. Inside this text, there is an image. For that image, I want to add a title below using the small tag. This is the HTML code (I added line breaks for better readability):

<p>Lorem ipsum dolor sit amet, <img src="img/myimage.png" alt="myimage" /><small>
Hey look, thats my image!</small><br />consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>

Now I want to add a bottom margin to the small-tag using this CSS-code:

p small {
    margin-bottom: 30px;
}

It is not working, no margin-bottom is applied. The selector is right as I can change the left margin, text color and so on.

How do I add a margin-bottom to small in Twitter Bootstrap?

Answer 1

p small is an inline item, and you can’t add margins to inline items. Try:

p small {
    margin-bottom: 30px;
    display: inline-block;
}

The only drawback about inline-block is that you might run into cross-browser compatibility issues.

In your specific example, perhaps you can wrap the img and small in a div, then define:

p small {
    margin-bottom: 30px;
    display: block;
}