Ciao a tutti,

ho questo problema :

Ho appena iniziato ad usare Bootstrap e devo fare un'immagine la quale é sovrapposta una fascia in trasparenza con delle scritte varie. Questo é il codice per costruire quest'immagine:
Codice PHP:
<div class="row">
                    <div class="col-sm-4">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <img src="images/4.jpg" alt="..." style="max-width: 100%; max-height: 100%; align:center;">
                            </div>
                        </div>
                        <p style="padding:10px; position: relative; top: -11em; width: 100%; height: 5em; text-align: center; background: rgba(246, 246, 246, 0.90);">
                            <strong style="color: red; font-size: 22px;">Dresses</strong><br>
                            <strong style="color: black; text-decoration: underline">Shop Now</strong>
                        </p>
                    </div>
                </div> 
e allego la foto di quello che il browser interpreta.Immagine.jpg

Come potete vedere dalla foto lo spazio tra una riga e un'altra é immenso. Questo perché la fascia che risulta spostata sull'immagine ha lasciato lo spazio occupato ( vuoto )( io ho usato top: -11 em per sovrapporlo).

Quindi la mia domanda é questa: come posso liberare questo spazio in modo tale che lo spazio tra le due righe sia giusto? Nella seconda immagine della prima riga ho tolto apposta il top: -11em; per far vedere.