CODEWITHSUNDEEP
htmlcss
very nice user
very nice user

Reputation: 5

Span not applying to all things in it

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

Upvotes: 0

Views: 564

Answers (2)

gavgrif
gavgrif

Reputation: 15489

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>

Upvotes: 0

ksav
ksav

Reputation: 20821

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

Upvotes: 1

Related Questions