Existe-t-il un terme spécifique pour les gouttières horizontales?


12

Contexte
Mon équipe travaille sur un site Web réactif et nous permettons à l'utilisateur de configurer certaines des propriétés de la page, y compris les espaces entre les "cellules" de la grille. Nous avons eu une conversation sur la terminologie correcte pour identifier "l'espace entre les cellules". Évidemment, nous pourrions utiliser quelque chose comme "marge", mais c'est un peu trop large car cela inclurait l'espace entre la page et les cellules les plus externes. Nous voulons identifier l'espace entre les cellules uniquement. Nos utilisateurs ne sont pas nécessairement technophiles (c'est-à-dire CSS, etc.), mais peuvent avoir une certaine expérience en conception graphique (ou au moins être familiers avec la terminologie courante).

La question
"gouttière" semble être le terme le plus correct, mais la plupart des définitions de "gouttière" que je peux trouver se réfèrent spécifiquement à l'espace entre les colonnes .

Existe-t-il un terme spécifique pour l'espace entre les lignes ? Ou est-il approprié de les désigner simplement comme des "gouttières horizontales"?

Exemple
Voici une illustration de ce que j'essaie d'identifier.
(Image empruntée à https://www.init.de/en/news/responsive-design )

entrez la description de l'image ici

Les problèmes avec ma terminologie actuelle
"gouttière horizontale (/ verticale)" sont un peu déroutants, à mon avis, car il n'est pas clair si la gouttière se situe entre des éléments horizontaux (/ verticaux) ou si elle fournit un espace horizontal (/ vertical) entre les verticales (/ horizontaux). Il y a un certain désaccord au sein de mon équipe sur la définition exacte, donc je pense que c'est une preuve suffisante que la phrase prête à confusion.

Au moins en ce qui concerne le Web, le "remplissage" et la "marge" ne conviennent pas à ce que je décris. Le remplissage fait référence à l'espace entre la bordure et le contenu, tandis que la marge fait référence à l'espace autour d' un élément. Deux éléments adjacents avec une marge de 10 pixels chacun auraient une gouttière de 20 pixels entre eux. (Oui, je suis conscient que les marges CSS s'effondrent souvent, mais pas toujours .)

J'ai vu le terme "gouttière" souvent utilisé dans les cadres de grille réactifs, donc je sais que c'est un terme acceptable dans le développement Web. Je me demande simplement s'il existe un terme plus approprié pour une "gouttière horizontale".


Bonne question, je ne connais pas de terme pour cela. Cependant, le terme gouttière est souvent utilisé à mauvais escient. L'espacement entre les colonnes est correctement appelé une allée . Voir cette image pour clarification
Zach Saucier

Vous ne voulez pas spécifiquement diriger ici, n'est-ce pas? Qu'en est-il de l'espacement des paragraphes?
e100

Le contexte est tout. Comme cela ressemble à un tableau, je suggère d'emprunter la terminologie utilisée par MS Excel lors du choix des options de formatage pour les cellules de feuille de calcul (je pense que c'est 'padding' IIRC)
DA01

En ce qui concerne l' espacement des paragraphes, si nous parlons vraiment de l'espace horizontal entre les paragraphes dans une colonne, je pense que le terme utilisé par les graphistes est «espacement des paragraphes».
DA01

L'espacement des cellules n'est pas correct, car cela ajoute de l'espace autour de l'extérieur de la table / grille
JDB se souvient toujours de Monica

Réponses:


3
Réponse courte

J'utiliserais "l'espacement des lignes".

Longue réponse

Comme JDB l'a mentionné, je préfère également utiliser des termes liés au Web plutôt que d'essayer d'importer des termes de composition du monde (fascinant) des médias imprimés.

J'utiliserais les termes "espacement des colonnes" et "espacement des lignes" car la plupart des dispositions de grille utilisent les termes "colonne" et "grille". J'éviterais d'utiliser les termes "marge" et "rembourrage" pour éviter les conflits avec les mots clés CSS.


1
La nouvelle spécification CSS Grid définit grid-row-gapetgrid-column-gap , mais j'aime vraiment "l'espacement" juste un peu mieux.
JDB se souvient encore de Monica

7

Dans le cadre de la conception Web, qui semble être la portée de la question du PO, je préfère utiliser des termes liés au Web plutôt que d'essayer d'importer des termes de composition du monde des médias imprimés (fascinant).

J'appellerais cela "marge verticale" comme dans la propriété CSS margin. La marge est l'espacement entre la bordure des éléments adjacents (par opposition au rembourrage, qui est l'espacement à l'intérieur de l'élément, entre sa bordure et son contenu.)

entrez la description de l'image ici

Selon les mots du W3C:

La marge efface une zone autour d'un élément (en dehors de la bordure). La marge n'a pas de couleur d'arrière-plan et est complètement transparente. la source

Veuillez noter que la bordure de l'élément peut être transparente. Il n'a pas besoin d'être visible.

Les développeurs sont tenus de comprendre ce terme assez clairement. Et, à mon avis, bien que "marge" soit moins charmante que "gouttière", "allée" ou "limace", les clients trouveront forcément un terme plus convivial.

Digression

Cellpaddinget cellspacingsont similaires à paddinget margin, mais ils sont trop spécifiques. Ce sont des attributs html valides des balises <table>et <td>par opposition aux attributs CSS généraux. Ils ne peuvent être appliqués à aucune autre balise que celles-ci. Si vous ne parlez que de tables (comme dans les constructions faites à l'aide de la <table>balise), vous auriez raison si vous appelez cette zone cellspacing. Si vous parlez des zones rectangulaires en général (comme dans les zones définies par <div>, <span>, <img>ou toute autre balise), alors marginserait plus précis.

Juste comme un commentaire secondaire, veuillez noter que les attributs cellpadinget cellspacingsont très désapprouvés par les concepteurs et développeurs Web modernes car ce type d'attribut mélange la structure (HTML) avec le style (CSS), ce qui entraîne des pages plus difficiles à maintenir et / ou à développer par équipes. Les développeurs sont encouragés à s'abstenir d'utiliser ces attributs et à utiliser les attributs CSS paddinget à la marginplace.

La même chose s'applique à l'utilisation de tableaux pour créer des dispositions générales, comme c'était le cas auparavant. Les puristes affirment que les tableaux ne devraient être utilisés que pour afficher des données tabulaires. <div>et des <span>étiquettes doivent être utilisées pour les échafaudages. Tout cela en espérant qu'un jour nous aurons des pages Web sémantiquement correctes si les balises marquent le contexte sémantiquement par opposition au gréement en coulisses uniquement.


2
"Marge" est un terme général se référant à l'espace autour des éléments, tandis que "gouttière" se réfère spécifiquement à l'espace entre les éléments. Par exemple, si deux éléments contigus ont chacun une marge de 10 pixels, alors la gouttière entre eux aurait une largeur de 20 pixels. J'ai vu des «gouttières» souvent utilisées dans divers cadres de disposition de grille, donc je ne pense pas que ce soit hors limites dans le contexte des sites Web. Je me demande simplement si c'est le terme correct pour l'espace entre les éléments empilés verticalement.
JDB se souvient encore de Monica le

1
@JDB: Assez juste ... Je suppose que l'acceptation de "gouttière" car l'espace entre les éléments dépendrait de votre public. BTW, dans les marges HTML / CSS, parfois se replient ensemble, donc deux éléments avec une marge de 10 pixels n'auraient pas nécessairement une gouttière de 20 pixels. Ils pourraient se retrouver avec une gouttière 10px si les marges s'effondrent. css-tricks.com/almanac/properties/m/margin
cockypup

De plus, (n'étant pas ennuyeux, je suis juste très enthousiaste à propos de ce thème) en CSS "margin" n'est pas un terme général. Il a une définition très précise. w3.org/TR/CSS2/box.html
cockypup

1
Bon point. Je conviens qu'il serait préférable d'avoir un terme qui se réfère à "l'espace réel qui est finalement laissé entre les éléments".
cockypup

1
Même s'ils répertorient toutes les façons dont les marges ne s'effondreront pas , "l'effondrement des marges semble être l'exception plutôt que la règle dans la documentation. Au moins, la documentation se lit comme des livres de grammaire anglaise: aucune règle et toutes les exceptions. Peut-être, au moins pour votre équipe, vous définissez un terme (comme "ruelle") qui est la marge verticale entre les éléments après (non) l'effondrement.
Yorik

4

En termes de composition, Slug est un terme commun pour un écart horizontal. - Espace après / avant un paragraphe, un espace horizontal entre les sections, ou entre les règles, etc.

sur la base de l'édition ....

Cell paddingsemble le choix le plus évident. Ou cell spacing.


Ce terme s'applique-t-il également à l'espacement après les sections? ou juste des paragraphes?
Zach Saucier

1
Elle s'applique à toute zone où un espace horizontal est utilisé. À l'époque du type chaud, le slug était utilisé pour créer un espace horizontal horizontal entre toutes les zones en cours de composition, qu'il s'agisse de paragraphes, de colonnes, de règles, etc.
Scott

Je l'aime bien, mais c'est très déroutant dans la conception web car il y a une deuxième définition en jeu.
JDB se souvient encore de Monica le

1
Limace était un terme utilisé pour tout espacement. Limaces de métal encastrées pour éviter l'encre. Ils ont été utilisés pour créer un espacement horizontal et aligner le type, ainsi qu'entre les types pour créer un espacement de paragraphe ou d'autres besoins d'espacement. Je me rends compte que ce n'est pas un terme que de nombreux créateurs connaissent aujourd'hui, à moins qu'ils n'aient peut-être travaillé pour des journaux. Cela ne signifie pas vraiment que ce n'est pas exact. Les éléments verticaux sont xheight, leader et slugs. En termes stricts de conception de sites Web, j'aurais plutôt tendance à utiliser la «marge».
Scott

1
... et réalisez que la question a été modifiée pour en ajouter beaucoup plus après avoir posté cette réponse. Il n'y avait aucune mention réelle de "web" auparavant.
Scott

1

Dans la conception de la mise en page, ces gouttières horizontales dans une grille sont appelées «lignes d'écoulement» ou «lignes de suspension»


2
Bienvenue sur GD.SE! Veuillez mieux expliquer votre réponse. Que voulez-vous dire par «mise en page»?
Mensch

Pour ajouter à ce que Kurt a dit, vous pouvez également inclure des exemples visuels.
WELZ
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.