CSS: Supprimer la Hauteur de Ligne (à gauche) sur plus de texte

Comment puis-je supprimer le leader de l'obligatoire durée, de sorte que le << a pas d'espace supplémentaire au-dessus et au-dessous.

La ligne du champ occupe une certaine hauteur en fonction de la valeur par défaut line-height pour la taille du texte, le champ obligatoire, cependant, est plus grand parce que la taille de la police est plus grande. Comment puis-je éliminer l'espace blanc supplémentaire au-dessus et au-dessous de la <<?

CSS:

.fieldRow { /* for illustration only */
        border: solid 1px #f00;  
}
.mandatory {
        color: #f00;
	border: solid 1px #f00; /* for illustration only */
	font-size: 24px;
	line-height: 0;
	vertical-align: middle;
}

HTML:

<div class="fieldRow">
  
	<label for="select">Some field</label>
	
	<select name="select">
		<option>Any</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>	
	
	<span class="mandatory">&laquo;</span>

</div>

  • Vous ne pouvez pas, que l'espace blanc fait partie du personnage. Meilleur pari est display: inline-block; margin-top: -6px; puis retirez la frontière
  • Obligatoire span a un autre font-size à son conteneur, si vous assurer qu'ils ont tous deux la même taille de police, puis l'espace blanc est beaucoup moins
  • rappelez-vous aussi, en raison de l'frontières de l'espace blanc va chercher 2px plus gros qu'ils ne le sont réellement
  • D'une façon plus robuste est d'essayer et de trouver un personnage (peut-être une flèche de caractères) que vous pouvez utiliser en taille normale, ou pour utiliser une image. L'utilisation des guillemets comme une sorte de flèches conduit à des problèmes de ce genre.
InformationsquelleAutor Chris Spittles | 2012-12-04
  1. 7

    Après la suppression de vertical-align: middle il me semble bon.

    .mandatory {
  color: #f00;
  font-size: 24px;
  line-height: 0;
}

    DÉMO

    InformationsquelleAutor Gurpreet Singh
  2. 2

    Supprimer vertical-align

    .mandatory {
    color: #f00;
    border: solid 1px #f00; /* for illustration only */
    font-size: 24px;
    line-height: 0 !important;
}​

    DÉMO

    InformationsquelleAutor Sowmya
  3. 1

    Vous avez ajouté des divers éléments de style qui ont ajouté l'espace, à savoir la font-size de l'obligation de l'échelle est différente de son conteneur.

    La frontière, vous avez ajouté le rend aussi les choses semblent un peu pire que ce qu'ils sont.

    Voir ce violon, il semble beaucoup mieux lorsque vous retirez le haut.

    Révisé CSS:

    .fieldRow {

  border: solid 1px #f00;
  font-size: 24px;

}
.mandatory {
  color: #f00;
  border: solid 1px #f00;
  border-top: 0;
  border-bottom: 0;
}
    InformationsquelleAutor Sean
  4. 1

    Je sais que c'est vieux, mais j'ai eu un problème similaire et est venu avec une solution différente.

    C'est très orthodoxe, mais vous pouvez mettre un récipient à travers le texte, puis utilisez dépassement de caché et de lui donner une hauteur. L'espace supplémentaire en vertu de la police de plus grande sera coupée par la div contenant. Vous n'êtes pas à s'en débarrasser, mais votre de le cacher. Cela fonctionne pour moi, peut ne pas fonctionner dans votre situation même si.

    CSS:

    .container {
  overflow: hidden;
  height: 30px; /* Or whatever height is necessary to show the text */
}

    HTML:

    <div class="container">
  <span class="mandatory">&laquo;</span>
</div>

    InformationsquelleAutor Stephen Starzyk