bonjour,
En relisant le code de quelqu'un, je vois qu'il utilise text-indent:5px plutôt que margin-left:5px.
Quelle différence fondamentale ça fait d'utiliser l'un plutôt que l'autre ?
Je ne vois pas la subtilité de différence....
et vous ?
Version imprimable
bonjour,
En relisant le code de quelqu'un, je vois qu'il utilise text-indent:5px plutôt que margin-left:5px.
Quelle différence fondamentale ça fait d'utiliser l'un plutôt que l'autre ?
Je ne vois pas la subtilité de différence....
et vous ?
Bonjour,
Il me semble qu'il vaut mieux comparer cette propriété avec la propriété padding.
https://drafts.csswg.org/css-sizing-3/#inner-size
https://drafts.csswg.org/css-text/#text-indent-property
En français,Citation:
This property specifies the indentation applied to lines of inline content in a block. The indent is treated as a margin applied to the start edge of the line box.
Tests
Unless otherwise specified by the each-line and/or hanging keywords, only lines that are the first formatted line of an element are affected. [CSS-PSEUDO-4] For example, the first line of an anonymous block box is only affected if it is the first child of its parent element.
https://developer.mozilla.org/fr/doc...SS/text-indentCitation:
La propriété text-indent définit la longueur qui doit être laissée avant le début de la première ligne d'un élément contenant du texte.
L'espacement horizontal se fait en accord avec la bord gauche (ou droit pour les dispositions de droite à gauche) de l'élément contenant le texte. Par défaut, cela ne contrôle que l'indentation de la première ligne du bloc mais les mots-clés hanging et each-line peuvent être utilisés pour modifier ce comportement.
Le comportement de cette propriété est particulier.
Code:
2
3
4
5
6
7
8
9
10
11
Affichera
Pièce jointe 649556
Le support est pas terrible
https://wpt.fyi/results/css/css-text...master&aligned
http://wpt.live/css/css-text/text-in...e-hanging.html
EN RESUME, c'est bien pour forcer un espace blanc pour la première phrase d'un bloc de texte.
C'est un héritage de l'art noble de la typographie https://practicaltypography.com/first-line-indents.html
Bonne journée.
ah oui d'accord.
La différence se perçoit uniquement sur un texte de plusieurs lignes car le retrait text-ident ne concerne pas les prochaines lignes contrairement au padding margin .
merci.
Bonjour,
visiblement tu en as saisi l'essentiel, ces propriétés ne s'exerçant pas sur les mêmes choses. C'est comme padding et margin, une pour écarter le contenu d'un élément vers l'intérieur de son « bloc » et l'autre pour l'éloigner des éléments extérieurs.
ton 1st exemple ne montre pas bien ce qui ce passe attendu qu'aucun texte n'est contenu dans ton élément et que l'héritage fait des siennes.Citation:
Envoyé par unanonyme
Code:
2
3
4
5
6
On ne peut pas mettre de valeurs négatives à la propriété padding alors que text-indent les accepte.
On en parlait il y a peu : Ajout de marge gauche dans une TD, à partir de la deuxième ligne
Bonjour,
En effet l'héritage de cette propriété est étonnant.
Code:
2
3
4
5
6
Pièce jointe 649591
On pourrait penser trouver 3em dans le noeud div modifié, n y trouve que 2em.
Je ne sais pas trop là. La définition du "inline-axis" n'est pas évidente dans la spec, j'ai pas trop cherché non plus.
https://drafts.csswg.org/css-writing-modes-4/#x-axis
Bonne journée.
:nono: l'héritage est écrasé par la nouvelle valeur, il n'est pas cumulé.Citation:
On pourrait penser trouver 3em dans le noeud div modifié, n y trouve que 2em.
Il te faudrait utiliser une autre propriété avec par exemple :
Code:
2
3
Je ne suis pas certain que tu avais bien saisit ma remarque.
Ce n'est pas une question d'écrasement de valeur,
c'est la question de savoir comment est déterminé la position de l'axe vertical gauche à
partir du quel la valeur de text-indent est appliquée.
Il me semblait que comme le parent à un text-indent=1em,
l'axe gauche de l'enfant était décalé d'autant avant d'appliquer, alors,
sa propre valeur de 2em.
Mais ce n'est pas ce qu'il se passe, l'axe gauche ici correspond au bord de l'iframe,
qui se confond donc avec html et aussi body.
Donc avec cet exemple je ne comprend pas bien comment le moteur fonctionne.
-----------------
C'est plus simple en affichant les bordures de boite
Pièce jointe 649598
c'est le pourquoi je mets des couleurs de fond qui montrent la « zone espace » de l'élément.Citation:
C'est plus simple en affichant les bordures de boite
