[Résolu] Espace indésirable sous les paragraphes avec lettrine.

  • WordPress :5.2
  • Statut : résolu
4 sujets de 1 à 4 (sur un total de 4)
  • Auteur
    Messages
  • #2272413
    E.Vouilleur
    Participant
    Initié WordPress
    2 contributions

    Bonjour à tous et toutes !

    Ma configuration WP actuelle

    • Version de PHP/MySQL : PHP 7.0.27
    • Thème utilisé : enfant de twenty sixteen
    • Extensions en place : Aucune
    • Nom de l’hébergeur : Ikoula
    • Adresse du site : https://www.ecrivouilleur.fr/

    Problème(s) rencontré(s) :

    Dès que j’active la lettrine, je vois s’ajouter un espacement supplémentaire sous le paragraphe en question. J’ai bien essayé de le résoudre avec forçant une marge et un padding nul sous le paragraphe (puisque je ne souhaite de toute façon aucun espace entre les paragraphes dans les passages où je souhaite utiliser la lettrine), mais rien n’y fait :

    .has-drop-cap:not(:focus)::first-letter{
      font-size:2.73em !important;
    	padding-bottom: 0px !important;
    	margin-bottom: 0px !important;
    }
    css lettrine tentative sans espace sous le paragraphe

    Quelqu’un aurait un conseil ?

    #2272416
    PhiLyon
    Modérateur
    Maître WordPress
    23528 contributions

    Bonjour.

    Apparemment tu as ajouté un bloc séparateur après ton paragraphe.

    🙂

    #2272420
    E.Vouilleur
    Participant
    Initié WordPress
    2 contributions

    Bonjour PhilLyon,

    Je viens tout juste de trouver une solution.

    En fait ce n’est pas un séparateur que j’ai ajouté, il semble qu’un ::after s’ajoute automatiquement après un paragraphe avec lettrine. J’ai fait tous les tests possibles, avec les paragraphes par défauts, mes paragraphes avec class perso, j’ai regardé d’autres blogs qui utilisent la lettrine, toujours cet espace supplémentaire. Je m’en suis aperçu de la présence de cet ::after en utilisant “examiner cet élément” sur firefox.

    ça se présente comme ça :

    <p class="has-drop-cap PicaPBRT">
    AV lieu que dans l’Europe on ſe ſert de biere au defaut de vin, dans l’Amerique on ſe ſert de Chocolate. Ce breuuage eſt fait d’vne certaine paſte, dont la baſe eſt le fruit d’vn arbre de l’Amerique, que l’on appelle Cacao, auec lequel on meſle de la canelle, vn peu de poivre, & des gouſſes de Campeche, qui ont l’odeur & preſque les meſmes qualitez que le fenoüil. On prend vne once de cette paſte, que l’on delaye dans vn demy-ſeptier d’eau, & on y adiouſte vne demy once de ſucre pour rendre cette compoſition plus agreable. Les Indiens aiment paſſionnement ce breuuage, & ils en boivent en ſi grande quantité, que dans la nouuelle Eſpagne ſeule on y employe par an plus de douze millions de liures de ſucre. Et la raiſon pour laquelle ils en font tant d’eſtat, c’eſt non ſeulement parce qu’il eſt agreable au gouſt, mais encore parce qu’il a de merueilleuſes qualitez pour conſeruer la ſanté. Car on dit qu’il aide à la digeſtion, qu’il engraiſſe, qu’il eſchauffe les eſtomachs qui ſont trop froids, qu’il rafraiſchit ceux qui ſont trop chauds, enfin qu’il a pluſieurs autres vertus admirables, que les Medecins Eſpagnols vantent extraordinairement.
    ::after
    </p>
    Exemple paragraphe avec lettrine

    Mais notez bien que quand on visualise le paragraphe en mode “modifier en html” sur Gutenberg ce ::after est introuvable.

    Bon, mais pour régler le problème, il suffit donc de rajouter, par exemple, ce petit bout de CSS, en spécifiant un padding-top (ça c’est étonnant…) à 0px

    .has-drop-cap:not(:focus)::after {
        content: "";
        display: table;
        clear: both;
    	padding-top: 0px;
    }
    lettrine sans espace

    Merci en tout cas d’avoir pris le temps de répondre !

    J’espère que ça servira à d’autres.

    #2272421
    PhiLyon
    Modérateur
    Maître WordPress
    23528 contributions

    Répondu trop vite, désolé.

    🙂

    • Cette réponse a été modifiée le il y a 1 mois et 1 week par  PhiLyon.
4 sujets de 1 à 4 (sur un total de 4)
  • Vous devez être connecté pour répondre à ce sujet.