Retraits li. A bas le remplissage entre les éléments en ligne (et les blocs)

Quels navigateurs s'installent par défaut ? Une question similaire se pose souvent parmi les concepteurs de mise en page débutants qui souhaitent supprimer de tels retraits d'éléments tels que les tableaux HTML (balise) et leurs cellules, etc. En fait, il n'y a rien de plus simple, mais voyons d'abord : voulez-vous dire des indentations lorsque vous cherchez la réponse à cette question ?

Il existe deux types de propriétés en CSS qui contrôlent le remplissage (CSS) et les marges (CSS) des éléments. Leurs emplacements sont indiqués dans l'image suivante :

Ainsi, lorsque de nombreux débutants disent vouloir supprimer le remplissage d'un élément, ils parlent en réalité de ses marges, puisque c'est ce que les navigateurs ajoutent généralement à certains éléments. Non, bien sûr, des retraits sont également ajoutés, mais il existe très peu d'éléments de ce type : par exemple, les balises et les navigateurs définissent des retraits non nuls afin que le texte sur les boutons ne s'adapte pas étroitement au cadre.

La situation est un peu différente pour les tableaux HTML, car ils ont deux paramètres supplémentaires - une propriété CSS qui modifie la distance entre les bordures ou les cadres des cellules (que l'on peut aussi appeler padding) et une propriété CSS qui supprime complètement cette distance et rend les frontières communes. L'image ci-dessous montre le placement de toutes ces marges et remplissages sur la table.

Ce à quoi vous devez faire attention ici. Eh bien, premièrement, pour les cellules du tableau, il n'y a pas de champs au sens habituel, ils sont utilisés à la place, et deuxièmement, la balise a à la fois des marges et des retraits, comme un élément HTML ordinaire. Eh bien, troisièmement, le retrait du bord intérieur du tableau jusqu'aux cellules est constitué de la taille du retrait interne du tableau, auquel s'ajoute la taille de la distance entre les cellules.

Eh bien, maintenant que vous savez tout cela, regardons quelques exemples.

Comment supprimer les marges des bords d'une page HTML

Exemple HTML et CSS : suppression des retraits de la balise BODY

website - Supprimer le remplissage le long des bords de la page

Contenu de la page.

Description de l'exemple

Pour concevoir visuellement des listes, tous les navigateurs populaires définissent des marges et des retraits pour la balise, et ils définissent des marges uniquement en haut et en bas (comme les paragraphes), et uniquement le retrait intérieur à gauche pour déplacer les éléments de la liste vers la droite. Cependant, pour des raisons de fiabilité, les marges et le remplissage ont également été supprimés de la balise, au cas où un navigateur déciderait de se comporter différemment des autres. D’ailleurs, cette approche s’appelle réinitialiser le CSS, vous pouvez le lire.

Comment supprimer les retraits d'un tableau

Exemple HTML et CSS : suppression du remplissage entre les cellules d'un tableau

website - Suppression des retraits d'un tableau HTML

Premier tableau

Cellule 1.1	Cellule 1.2
Cellule 2.1	Cellule 2.2

Deuxième tableau

Cellule 1.1	Cellule 1.2
Cellule 2.1	Cellule 2.2

Troisième tableau

Cellule 1.1	Cellule 1.2
Cellule 2.1	Cellule 2.2

Description de l'exemple

Pour plus de clarté, des cadres ont été ajoutés aux tableaux et aux cellules. Je n'ai appliqué aucun style spécial au premier tableau, afin que vous puissiez voir que les navigateurs par défaut n'ajoutent aucune marge ni remplissage aux tableaux, mais définissent uniquement une petite distance entre les cellules. C'est ce que nous allons nettoyer.

La propriété CSS :collapse a été appliquée au deuxième tableau afin que les bordures des cellules adjacentes deviennent communes. Mais dans le troisième, la distance entre les cellules a simplement été remise à zéro, mais leurs bordures (cadres) sont restées en place, cela se voit très clairement grâce à l'épaississement caractéristique des cadres. Naturellement, en fait, aucun épaississement ne s'est produit, les cadres de la table se sont simplement « accrochés » les uns aux autres.

En général, comme vous pouvez le constater, ces deux méthodes aident à supprimer les retraits dans le tableau, elles le font simplement un peu différemment.

Lors de la création d'un bloc avec une liste de liens, il est généralement recommandé d'utiliser la propriété display avec les attributs block ou inline-block, ce qui augmentera la taille du champ du lien actif. Les grands champs de liens actifs améliorent la convivialité des éléments ; les grands éléments sont plus faciles à naviguer avec la souris.

Éléments avec display: block sont rendus sous forme d'éléments de bloc.

Un élément avec display: inline-block est rendu comme un élément de bloc qui entoure d'autres éléments comme s'il était en ligne. Le contenu est formaté en tant qu'élément de bloc et l'élément lui-même est formaté en ligne.

Regardons un exemple simple avec une liste de liens :

Si vous ne modifiez pas le style des liens, alors la taille de leurs champs actifs correspond à la taille du texte qu'ils contiennent.

Nous pouvons améliorer cela en faisant en sorte que la taille du champ actif corresponde à la largeur de l'élément parent.

Ul a ( affichage : bloquer ; )

Nous pouvons faire encore mieux.

Assurez-vous que les éléments de la liste ne comportent pas de champs, contrairement aux liens.
Les liens n'ont pas de marges car les marges ne sont pas la zone active des éléments.

ul li ( remplissage : 0 ; marge : 0 ; ) ul a ( remplissage : 5px ; affichage : bloc ; )

L'article contient des choses évidentes, mais bien souvent on peut trouver sur Internet des blocs de liens qui ne sont pas « défigurés » par des champs actifs élargis.

Article original : Gardez les marges hors des listes de liens Par : Chris Coyier le 29/11/2010

Tâche

Supprimez le remplissage autour des listes à puces ou numérotées.

Solution

Utilisez la propriété de style margin et padding avec une valeur nulle pour le sélecteur UL ou OL, selon le type de liste, comme indiqué dans l'exemple 1.

Exemple 1 : indentation de liste

HTML5 CSS 2.1 IE Cr Op Sa Fx

Indentation de la liste

Cheburachka
Géna Crocodile
Shapokliak

Le résultat de cet exemple est présenté sur la Fig. 1.

Riz. 1. Liste sans retraits verticaux et horizontaux

Notez que les marqueurs de liste qui apparaissent sur le bord gauche de la page Web disparaissent. Pour supprimer uniquement les marges supérieure et inférieure sans déplacer la liste vers la gauche, utilisez les propriétés margin-top et margin-bottom (exemple 2).

Exemple 2 : Indentation de liste

HTML5 CSS 2.1 IE Cr Op Sa Fx

Indentation de la liste

Cheburachka
Géna Crocodile
Shapokliak

Les blocs en ligne (inline-block) sont dans de nombreux cas un outil de balisage très pratique. Des exemples de leur utilisation peuvent être trouvés dans les articles.

En même temps, ils comportent un piège. Je dirais même un pavé entier. Voulez-vous le voir? Placez plusieurs éléments en ligne (ou blocs en ligne) dans une rangée.

Disons que nous avons ce HTML :

Cigogne.
Juste
lignes

Rendre les éléments en minuscules :

Li( display:inline; )

...ou des blocs de lignes :

Li( display:inline-block; /* Les deux lignes suivantes pour IE6-7 - émulent le comportement d'un bloc en ligne */ //display:inline; zoom:1; )

Problème

La plupart des navigateurs séparent les blocs (éléments) en ligne par indentation. Pour faciliter la perception, j'ai un peu coloré les blocs.

Oops! Quel genre d'indentations ? Je n'ai rien prescrit de pareil !

Soyons d'accord que ci-après j'écrirai simplement « bloc en ligne », et signifierai « bloc en ligne ( :inline-block) ou simplement élément en ligne (display:inline) », car ils ont un problème tout à fait commun et il est également traité de la même manière. chemin.

Qui traitons-nous ?

Ainsi, les blocs en ligne ont désormais de mystérieuses indentations. Bien entendu, cela ne s’applique pas uniquement aux listes. Un groupe situé dans une rangée, par exemple « ov », se comportera de la même manière.

Pour être juste, il convient de noter que IE6 et IE7 rendront le tout sans indentation :

C'est ainsi que je veux que tous les navigateurs s'affichent !

Nous n'entrerons pas dans les détails de la question de savoir qui a raison et qui a tort (lire - prend en charge les normes de manière tordue), nous obtiendrons simplement la compatibilité entre navigateurs. C'est très pratique lorsque le comportement est prévisible - je n'ai défini aucun retrait, ce qui signifie que je n'ai pas besoin de les dessiner !

En fait, tout est simple : pour supprimer les retraits, il faut comprendre d'où ils viennent !

D'où viennent les empreintes ?

Et ce n'est pas difficile à comprendre. Il suffit d'écrire les balises sur une seule ligne :

Cigogne.
Juste
lignes

Des miracles ! Les empreintes ont disparu d'elles-mêmes ! Conclusion : ils sont générés par des caractères invisibles entre les balises - césure ou espace.

Bien entendu, « tout écrire sur une seule ligne », bien qu'il s'agisse d'une solution multi-navigateurs au problème, n'est pas envisagée ici, pour des raisons évidentes (qui écrit sans retrait ?). Nous cherchons d'autres moyens.

A bas les indentations !

Puisque l'indentation est créée par des caractères du conteneur, une idée judicieuse serait de « neutraliser » ces caractères - définissez-les sur :0 ; (l'essentiel est de ne pas oublier que cette propriété est héritée et de l'interrompre pour les descendants eux-mêmes) :

Ul( taille de police:0; ) li( taille de police:14px; display:inline; )

Solution parfaite ! Les blocs de lignes sont vraiment pressés les uns contre les autres. Il y a encore un petit problème esthétique : dans certains navigateurs (par exemple, Opera 9.5 et versions antérieures), il y a une indentation en haut ou en bas à l'intérieur du parent (le parent sur l'image est rempli d'un gris-vert pâle) :

L'image a été agrandie pour que les retraits verticaux soient visibles

Ce problème est similaire à celui décrit dans l'article et est traité à peu près de la même manière : add :0; (encore une fois, n'oubliez pas de chevaucher le descendant). On obtient donc :

Ul( font-size:0; line-height:0; ) li( font-size:14px; line-height:normal; /* ou une autre valeur appropriée */ display:inline; )

Est-ce que tout va bien maintenant ? Ce n’est pas le cas !

Les problèmes sont venus d'où nous ne nous y attendions pas

Apparemment, ces indentations devraient vraiment être là ! Il y a deux arguments irréfutables pour soutenir cela :

IE6-7 ne les dessine pas ;
Malgré nos efforts, les navigateurs Webkit les dessinent toujours.

Oui oui! Safari et Chrome, après toutes les astuces ci-dessus, ont daigné simplement réduire le remplissage de trois pixels à un !

Les webkits têtus ne veulent pas abandonner !

Mise à jour du 3.07.2011 par Nick. FF a présenté une autre surprise cachée. Si vous redimensionnez la page, il y a parfois un remplissage supplémentaire de 1 px en haut. Cela peut être résolu en ajoutant la règle d'affichage : -moz-inline-stack ;

Décision finale

Il a été possible de contourner le webkit en utilisant :-1px. Cependant, aucun effet secondaire néfaste n'a été trouvé (à moins, bien sûr, que vous oubliiez de remplacer la propriété dans les descendants).

CSS final avec solution multi-navigateur pour les éléments en ligne :

Ul( font-size:0; /* supprime l'espacement horizontal */ line-height:0; /* ...et vertical dans certains navigateurs */ letter-spacing:-1px; /* convaincre le webkit */ ) li ( font -size:14px; /* N'oubliez pas de restaurer les valeurs normales */ line-height:normal; letter-spacing:normal; display:inline; )

Pour les blocs en ligne :

N'oubliez pas que la propriété zoom n'est pas valide. Par conséquent, dans des conditions de combat, placez-le dans un CSS séparé, connecté à l'aide de .