Question

On my website on the page “Equipe”, I would like some more space between the text “Founder and Managing Director” and the text below. I tried margin bottom but doesn’t seem to work. Any suggestion?

Note: a br would be too much space.

HTML code:

<div class="equipe-bio">
    <img src="images/avatar-man.png" width="80" height="80" alt="Picture" />
    <p><span class="bioname">Gregory Yrogerg</span></p>
    <p><span class="biotitle">Founder and managing director</span></p>
    <p>Originaire de Belgique, Gregory vit depuis plus de 20 années en Norvège. Lorem ipsum dolor sit amet,...</p>
</div>

Answer 1

A simple fix would be to add the margin-bottom to the <p> tag, which should achieve your desired effect:

<p style="margin-bottom: 5px;">
    <span class="biotitle">Founder and managing director</span>
</p>

By default span is an inline element. So if you wanted to add a margin to a span, you would have to change the display property:

.biotitle {
    display: block;
    margin-bottom: 5px;
}