Discussion :

[clavier12AZQSWX]

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 ?

[unanonyme]

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

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.

En français,

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.

https://developer.mozilla.org/fr/doc...SS/text-indent

Le comportement de cette propriété est particulier.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div style="text-indent: 10px">
  <div>toto</div><br/>
  <div>tata</div>
</div>
 
<hr/>
 
<div style="text-indent: 10px">
  <span>toto</span><br/>
  <span>tata</span>
</div>

Affichera


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.

[clavier12AZQSWX]

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.

[NoSmoking]

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.

Le comportement de cette propriété est particulier.
(...)
Le support est pas terrible

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.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div style="text-indent: 1em; background:#EFD;line-height:2">
  Texte qui est indenté
  <div style="background:#DEF">Texte indenté, héritage du parent</div>
  <div style="background:#FDE">Texte indenté, héritage du parent</div>
  Texte qui n'est pas indenté
</div>

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

[unanonyme]

Bonjour,

En effet l'héritage de cette propriété est étonnant.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div style="text-indent: 1em; background:#EFD;line-height:2">
  Texte qui est indenté
  <div style="background:#DEF;text-indent: 2em;">Texte indenté, héritage du parent</div>
  <div style="background:#FDE">Texte indenté, héritage du parent</div>
  Texte qui n'est pas indenté
</div>

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.

[NoSmoking]

On pourrait penser trouver 3em dans le noeud div modifié, n y trouve que 2em.

l'héritage est écrasé par la nouvelle valeur, il n'est pas cumulé.

Il te faudrait utiliser une autre propriété avec par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
div_concerné:first-letter {
  padding-left: 2em;
}

[unanonyme]

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