S'il y a juste une balise p dans le HTML qui a une couleur d'arrière-plan de bleu, et a margin: auto , alors elle prend la largeur de la page , et la largeur et le remplissage peuvent être modifiés, comme un bloc en ligne.
<div> <p>Lorem ipsum</p> </div>
div {
display: grid;
grid-template-columns: 1fr;
}
p {
background-color: blue;
margin: auto;
}
Mais si j'ajoute un div parent à la balise p et que je fais afficher le div en : grid , avec grid-template-columns: 1fr , alors le fond bleu ne prend que la largeur du texte.
<p>Lorem ipsum</p>
p {
background-color: blue;
margin: auto;
}
Alors, est-ce que display: grid fait que les éléments enfants ont display: inline-block ?
4 Réponses :
Les valeurs de marge auto gauche et droite se comportent différemment dans les contextes d'éléments flexibles ou de grille. Cela réduira entièrement un élément à sa largeur intrinsèque plutôt que de lui permettre de s'étendre comme prévu.
C'est un comportement similaire à ce que les valeurs d'affichage inline-block produiraient, mais l'élément en question ne l'est absolument pas inline-block comme vous le soupçonniez.
<div> <p>Lorem ipsum</p> </div>
div {
display: grid;
grid-template-columns: 1fr;
}
p {
background-color: blue;
margin: auto;
}
J'ai résolu le problème dans la question, margin: auto doit être sur la balise p.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
display: grid;
grid-template-columns: 1fr;
}
p
{
background-color: blue;
margin: auto;
}
</style>
</head>
<body>
<div>
<p>This is the p tag</p>
</div>
</body>
</html>
Oui, cela affecte si vous conservez la propriété margin: auto sur l'élément enfant, il ne s'agit donc pas de propriété de bloc en ligne, de propriété de marge faisant que la balise
prenne la largeur du texte.
Voici le code que vous avez décrit:
<div> <p>Some content goes here...</p> </div>
p {
background-color: blue;
margin: auto;
}
div {
display: inline-block;
}
Voici le code avec display: inline-block :
<div> <p>Some content goes here...</p> </div>
p {
background-color: blue;
margin: auto;
}
div {
display: grid;
grid-template-columns: 1fr;
}
Comme vous pouvez le voir, les résultats sont légèrement différents. Si vous inspectez la console et sélectionnez la grille, ce sera toujours toute la largeur de l'écran car vous n'avez défini qu'une colonne. Cependant, le fond bleu ne sera qu'une fraction de cet élément. Lorsque vous utilisez margin: auto sur un élément à l'intérieur de la grille, il se centre à l'intérieur, agissant comme un conteneur.
La réponse est non. L'utilisation de display: grid ne rend pas les éléments enfants display: inline-block .
Lorsque vous définissez un élément sur display: grid ou inline-grid , vous établissez un contexte de formatage de grille . Il s'agit d'une structure de mise en page unique avec son propre ensemble de règles. Le fait que certains comportements coïncident avec des comportements dans un contexte de formatage de bloc est fortuit.
La valeur display des éléments de la grille est régie par le conteneur de la grille. En fait, peu importe ce que la valeur dit (dans les inspecteurs de navigateur) ou ce que l'auteur déclare (vous pouvez définir display sur tout ce que vous voulez), ces valeurs sont ignorées et le comportement ultime est contrôlé par le conteneur de grille.
La valeur display des éléments flex fonctionne de la même manière.
Plus de détails:
Je pense que la question n'est pas bien posée. L'OP semble lier n'importe quel comportement shrink-to-fit avec un bloc en ligne, donc chaque fois que nous avons un élément qui correspond à la largeur de son contenu, il devrait nécessairement être un bloc en ligne, ce qui n'est pas le cas. Je pense qu'il vaut la peine d'expliquer pourquoi l'utilisation de la configuration qu'il a décrite nous conduit à cette sortie où l'arrière-plan est uniquement autour du texte.
@TemaniAfif, j'essaie généralement de publier des réponses qui servent l'intérêt général, pas seulement le PO. La valeur display des éléments de la grille fait souvent l'objet de mystère ou de confusion. J'espère que ma réponse aidera à clarifier la question. (De plus, la question a été considérablement modifiée depuis que j'ai publié ma réponse.)
oui tout va bien si nous considérons la question / réponse comme énoncée mais j'essaie d'être dans l'esprit du PO (et des autres utilisateurs) Ils ne comprennent probablement pas pourquoi le comportement de rétrécissement se produit qui les amène à penser que nous vous avez affaire à un bloc en ligne (la confusion dont vous avez parlé) ... Au fait, je me souviens que vous avez une réponse à ce sujet, je vais essayer de la trouver
Si je couvre un angle et que vous couvrez l'autre angle, nous couvrons les deux interprétations et tous les visiteurs en bénéficient ;-) @TemaniAfif
eh bien j'ai trouvé une de mes réponses, voici ce que je voulais dire stackoverflow.com/a/50841453/8620333 .. l'explication ce centrage (comme l'utilisation de la marge) réduira l'élément. (Je suis presque sûr d'avoir vu l'un des vôtres similaire à celui-ci avec plus de détails)
@ Michael-B Donc, il a essentiellement un type d'affichage unique, comme une balise img?
Il a un type unique de affichage comportement . La valeur réelle peut indiquer (dans les inspecteurs de navigateur) block ou flex ou autre chose. Mais le comportement ne serait pas le même.