Span not applying to all things in it - html

Question

I'm creating a website for a class and I need a part of the <p> to have a certain padding but it's only applying to the first line.
The HTML is :
<p>
Some text
<span class="tabulation">
Une ambiance conviviale
<br>
Durant l'été, une grande terrasse ensoleillée
<br>
En hiver, une verrière chauffée
<br>
De l'espace de stationnement
<br>
Un chef cuisinier d'expérience
<br>
Des salles privées pour les repas de groupe
<br>
Un menu pour enfant
<br>
Une vue sur le fleuve
</span>
</p>
What happens is that the span only applies to the first line. I know it's from the br, but I don't know how could I make it work. Thank you

Answer 1

Depending on what you're trying to achieve, try making your span display:block or display: inline-block
.tabulation {
padding: 2em;
display: block;
}
<p>
Some text
<span class="tabulation">
Une ambiance conviviale
<br>
Durant l'été, une grande terrasse ensoleillée
<br>
En hiver, une verrière chauffée
<br>
De l'espace de stationnement
<br>
Un chef cuisinier d'expérience
<br>
Des salles privées pour les repas de groupe
<br>
Un menu pour enfant
<br>
Une vue sur le fleuve
</span>
</p>
Also, see understanding inline box model

Answer 2

Rather than relying on the <br/> element - I would use spans with display: block applied to them - this will force them to be on individual lines and will allow you to apply styling directly to them for the padding etc.
Alternatively - if the children items are a list with the text at the top as a heading - you could use a <ul> or a <dl>. The advantage of a <dl> is that you get the <dt> element to provide the headings and the <dd> elements are already block level elements so you just need to space them out as desired.
.tabulation span {
display: block;
padding: 8px 16px;
}
.tabulation dd {
padding: 8px 16px;
margin: 0
}
<p class="tabulation">
Some text (using spans to show the items)
<span>Une ambiance conviviale</span>
<span>Durant l'été, une grande terrasse ensoleillée</span>
<span>En hiver, une verrière chauffée</span>
<span>De l'espace de stationnement</span>
<span>Un chef cuisinier d'expérience</span>
<span>Des salles privées pour les repas de groupe</span>
<span>Un menu pour enfant</span>
<span>Une vue sur le fleuve</span>
</p>
<hr/>
<dl class="tabulation">
<dt>Some text (using a DL to show the items)</dt>
<dd>Une ambiance conviviale</span>
<dd>Durant l'été, une grande terrasse ensoleillée</dd>
<dd>En hiver, une verrière chauffée</dd>
<dd>De l'espace de stationnement</dd>
<dd>Un chef cuisinier d'expérience</dd>
<dd>Des salles privées pour les repas de groupe</dd>
<dd>Un menu pour enfant</dd>
<dd>Une vue sur le fleuve</dd>
</dl>