Citer la bordure gauche à la même hauteur que le texte

-3

Comment faire pour que la ligne d'une citation de bloc ait exactement la même hauteur que le texte qui se trouve dans l'élément.Citer la bordure gauche à la même hauteur que le texte

Voici un exemple de ce qu'il devrait ressembler à:

Ceci est le résultat courant que je reçois du code que j'ai créé:

blockquote { 
 
    margin: 20px 0 30px; 
 
    padding-left: 20px; 
 
    border-left: 5px solid #1371b8; 
 
}

<blockquote>Test</blockquote>

A partir du résultat, nous peut voir que la ligne est verticalement plus grande que le texte.

Source

2017-08-31 Jordan Kellett

Cela dépendra fortement de la police utilisée. Les caractères sont supposés avoir un espace au-dessus et au-dessous pour plus de lisibilité. –

REMARQUE: inline-flex ne prend pas en charge les navigateurs plus anciens: http://caniuse.com/#feat=flexbox
Mais il ne fonctionne ...

Ajout d'une durée à l'intérieur du blockquote à sa position optimale; gardez à l'esprit que vous devrez refaire ceci quand vous changez les polices ou la taille de police!

blockquote { 
 
    font-size: 50px; 
 
    text-transform:uppercase; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    margin-left: 50px; 
 
    padding-left: 15px; 
 
    border-left: 5px solid #66e4b4; 
 
    display:inline-flex; 
 
} 
 

 
blockquote span { 
 
    margin-top:-10px; 
 
    margin-bottom:-10px; 
 
}

<blockquote ><span>windows to the universe</span></blockquote>

- Cette réponse est basée sur l'extrait de code d'origine (qui se trouve ci-dessous) par عارف بن الأزرق

Source

2017-08-31 13:33:41 jcdenooy

il est mauvais de prendre quelqu'un code puis faire une nouvelle réponse –

Mes excuses, il est en effet basé sur votre code. Je vais éditer ma réponse pour le montrer, et je n'oublierai pas de faire référence dans le futur. Comme les commentaires sont destinés à _clarification/pour signaler des problèmes_, j'ai estimé que cela ne suffirait pas, car les questions bénéficieraient davantage d'un nouvel extrait de code. – jcdenooy

Oui, vous avez raison à ce sujet, merci –

-1

Essayez que

blockquote { 
 
    font-size: 50px; 
 
    text-transform:uppercase; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    margin-left: 50px; 
 
    padding-left: 15px; 
 
    border-left: 5px solid #66e4b4; 
 
}

<blockquote >windows to the universe</blockquote>

Source

2017-08-31 11:05:00

Ceux-ci semblent encore sortir un peu? C'est en raison de la hauteur des tags mais je ne sais pas comment faire en sorte que l'étiquette ait exactement la même hauteur que le texte. –

Vous pouvez utiliser-hauteur de la ligne. Quelque chose comme ceci:

<style> 
.header blockquote { 
margin: 20px 0 30px; 
padding-left: 20px; 
border-left: 5px solid #1371b8; 
line-height: 25px; 
} 
</style> 

<div class="header"> 
<blockquote><h1>WINDOWS TO <br /> 
THE UNIVERSE</h1></blockquote> 
</div>

Source

2017-08-31 11:13:00 Ptrckk

Citer la bordure gauche à la même hauteur que le texte

Répondre

Questions connexes