1
votes

Cet élément html est-il invalide, span affecté par la mise en forme

Ce Html (qui utilise Bootstrap 4) fonctionne comme prévu

<h6>01 - 01 - Apache.wav <span class="badge badge-pill badge-secondary">Updated</span><span class="badge badge-pill badge-success">MusicBrainz</span><span class="badge badge-pill badge-success">Discogs</span></h6>

mais si je supprime les jolies impressions

 <h6>
        01 - 01 - Apache.wav <span class="badge badge-pill badge-secondary">Updated</span>
        <span class="badge badge-pill badge-success">
            MusicBrainz
        </span>
        <span class="badge badge-pill badge-success">
            Discogs
        </span>
    </h6>

alors il n'y a pas de remplissage entre les badges.

Pourquoi est-ce que c'est quelque chose à voir avec le fait d'avoir du texte dans h6 puis un span, mon html est-il incorrect.

html css bootstrap-4

0 commentaires

4 Réponses :

2
votes

C'est parce que vous avez supprimé les espaces blancs lors de la fusion de tout en une seule ligne:

<h6>01 - 01 - Apache.wav <span class="badge badge-pill badge-secondary">Updated</span> <span class="badge badge-pill badge-success">MusicBrainz</span> <span class="badge badge-pill badge-success">Discogs</span></h6>

est devenu:

<h6>01 - 01 - Apache.wav <span class="badge badge-pill badge-secondary">Updated</span><!-- no whitespace here --><span class="badge badge-pill badge-success">MusicBrainz</span><!-- no whitespace here --><span class="badge badge-pill badge-success">Discogs</span></h6>

Re-ajouter l'espace blanc pour obtenir un rendu identique:

<h6>
    01 - 01 - Apache.wav <span class="badge badge-pill badge-secondary">Updated</span><!-- here is whitespace
    up to here --><span class="badge badge-pill badge-success">
        MusicBrainz
    </span><!-- more whitespace
spaces here --><span class="badge badge-pill badge-success">
        Discogs
    </span>
</h6>

3 commentaires

Merci pour l'explication, mais ne comprenez pas complètement parce que seules les lignes newl dépouillées et non les espaces, cela ne semble pas la bonne façon de résoudre ce problème, un peu hacky. Je suppose de getbootstrap.com/docs/4.3/components/badge que les badges devraient avez un rembourrage?

@PaulTaylor Eh bien, il y a beaucoup d'espaces au début de chaque ligne et vous les avez également supprimés

Cela n'a rien à voir avec le bootstrap ou le composant badge , mais c'est simplement la façon dont les navigateurs interprètent le HTML et les nœuds d'espaces.

0
votes

c'est parce que vous avez supprimé les espaces, vous devez donc ajouter des espaces ou vous pouvez ajouter la classe mr-1 (margin-right) à span

0 commentaires

0
votes

En raison de la suppression des espaces, il faut ajouter des espaces ou bien vous pouvez ajouter une marge ou un remplissage à la balise span.

0 commentaires

3
votes

Cet article explique comment le navigateur gère les onglets et les espaces blancs. https://medium.com/@patrickbrosset/ quand-fait-l'espace-blanc-matière-dans-html-b90e8a7cdd33

Selon l'article, les onglets et les nouvelles lignes de votre premier extrait de code sont convertis en espaces blancs.

L'auteur a répertorié en points le mécanisme suivi par le navigateur (Voir point n ° 3).

1 commentaires

Merci cet article explique très bien, (mais ce serait mieux si vous postiez plus de détails directement dans votre réponse)