Esiste un termine specifico per grondaie orizzontali?


12

Contesto Il
mio team sta lavorando su un sito Web reattivo e consentiamo all'utente di configurare alcune delle proprietà della pagina, inclusi gli spazi tra le "celle" della griglia. Abbiamo avuto una conversazione sulla terminologia corretta per identificare lo "spazio tra le celle". Ovviamente potremmo usare qualcosa come "margine", ma è un po 'troppo ampio in quanto includerebbe lo spazio tra la pagina e le celle più esterne. Vogliamo identificare lo spazio solo tra le celle. I nostri utenti non sono necessariamente esperti di tecnologia (intendendo CSS, ecc.), Ma possono avere un po 'di esperienza nella progettazione grafica (o almeno avere familiarità con la terminologia comune).

La domanda
"Grondaia" sembra il termine più corretto, ma la maggior parte delle definizioni di "grondaia" che trovo si riferiscono specificamente allo spazio tra le colonne .

Esiste un termine specifico per lo spazio tra le righe ? O è appropriato fare semplicemente riferimento a loro come "grondaie orizzontali"?

Esempio
Ecco un'illustrazione di ciò che sto cercando di identificare.
(Immagine presa in prestito da https://www.init.de/en/news/responsive-design )

inserisci qui la descrizione dell'immagine

Problemi con la mia terminologia attuale
" Scanalatura orizzontale (/ verticale)" è un po 'confusa, secondo me, poiché non è chiaro se la grondaia si trova tra elementi orizzontali (/ verticali) o se fornisce spazio orizzontale (/ verticale) tra verticale (/ orizzontale) elementi. C'è un certo disaccordo nel mio team su quale definizione sia accurata, quindi penso che sia abbastanza prova che la frase sia in realtà confusa.

Almeno in relazione al web, "padding" e "margin" non sono appropriati per quello che sto descrivendo. Il riempimento si riferisce allo spazio tra il bordo e il contenuto, mentre il margine si riferisce allo spazio attorno a un elemento. Due elementi adiacenti con un margine di 10px ciascuno avrebbero una grondaia di 20px tra di loro. (Sì, sono consapevole che i margini CSS spesso collassano, ma non sempre .)

Ho visto il termine "grondaia" usato spesso nei framework di griglia reattivi, quindi so che è un termine accettabile nello sviluppo web. Mi chiedo solo se esiste un termine più appropriato per una "grondaia orizzontale".


Bella domanda, non conosco un termine per questo. Tuttavia, il termine grondaia viene spesso utilizzato in modo improprio. La spaziatura tra le colonne è propriamente chiamata vicolo . Vedi questa immagine per chiarimenti
Zach Saucier,

In particolare non intendi guidare qui, vero? Che dire della spaziatura dei paragrafi?
e100,

Il contesto è tutto. Dato che suona come una tabella, suggerirei di prendere in prestito qualunque terminologia utilizzi da MS Excel quando si scelgono le opzioni di formattazione per le celle del foglio di calcolo (penso che sia "riempimento" IIRC)
DA01,

Per quanto riguarda la spaziatura dei paragrafi se parliamo veramente dello spazio orizzontale tra i paragrafi in una colonna, credo che il termine utilizzato dai grafici sia "spaziatura di paragrafo".
DA01,

La spaziatura delle celle non è corretta, in quanto aggiunge spazio attorno all'esterno della tabella / griglia
JDB ricorda ancora Monica,

Risposte:


3
Risposta breve

Vorrei usare "spaziatura righe".

Risposta lunga

Come accennato da JDB, anch'io preferirei usare termini legati al web invece di cercare di importare termini di composizione dal (affascinante) mondo dei media stampati.

Vorrei usare i termini "spaziatura colonna" e "spaziatura riga" perché la maggior parte dei layout di griglia usa i termini "colonna" e "griglia". Eviterei di usare i termini "margine" e "riempimento" per evitare scontri con le parole chiave CSS.


1
Le nuove specifiche CSS Grid definiscono grid-row-gapegrid-column-gap , ma in realtà mi piace "spaziare" solo un po 'meglio.
JDB ricorda ancora Monica

7

Nell'ambito del web design, che sembra essere l'ambito della domanda del PO, preferirei usare termini legati al web invece di cercare di importare termini di composizione dal (affascinante) mondo dei media stampati.

Definirei questo "margine verticale" come nella proprietà del margine CSS. Il margine è la spaziatura tra il bordo degli elementi adiacenti (al contrario dell'imbottitura, ovvero la spaziatura all'interno dell'elemento, tra il suo bordo e il suo contenuto).

inserisci qui la descrizione dell'immagine

Nelle parole del W3C:

Il margine cancella un'area attorno a un elemento (fuori dal bordo). Il margine non ha un colore di sfondo ed è completamente trasparente. fonte

Si noti che il bordo dell'elemento può essere trasparente. Non ha bisogno di essere visibile.

Gli sviluppatori sono tenuti a comprendere questo termine abbastanza chiaramente. E, secondo me, anche se "margine" è meno affascinante di "grondaia", "corridoio" o "lumaca", i clienti sono tenuti a trovarlo un termine più amichevole.

Digressione

Cellpaddinge cellspacingsono simili a paddinge margin, ma sono troppo specifici. Sono attributi html validi dei tag <table>e <td>rispetto agli attributi CSS generali. Non possono essere applicati a nessun altro tag tranne quelli. Se stai parlando solo di tabelle (come nei costrutti realizzati usando il <table>tag), allora saresti corretto se chiami quell'area cellspacing. Se si sta parlando di aree rettangolari in generale (come nelle aree definite da <div>, <span>, <img>o qualsiasi altro tag), quindi marginsarebbe più esatto.

Proprio come un commento laterale, si noti che gli attributi cellpadinge cellspacingsono fortemente disapprovati dai moderni web designer e sviluppatori perché questo tipo di attributo mescola struttura (HTML) con stile (CSS) risultando in pagine che sono più difficili da mantenere e / o sviluppare da squadre. Gli sviluppatori sono incoraggiati a non utilizzare questi attributi e utilizzare gli attributi CSS paddinge margininvece.

La stessa cosa si applica all'utilizzo delle tabelle per creare layout generali, come una volta. I puristi sostengono che le tabelle dovrebbero essere utilizzate solo per visualizzare dati tabulari. <div>e i <span>tag dovrebbero essere usati per i ponteggi. Tutto questo nella speranza che un giorno avremo pagine Web semanticamente corrette, i tag segnano il contesto semanticamente anziché essere solo rigging dietro le quinte.


2
"Margine" è un termine generale che si riferisce allo spazio attorno agli elementi, mentre "grondaia" si riferisce specificamente allo spazio tra gli elementi. Ad esempio, se due elementi contigui hanno ciascuno un margine di 10px, allora il margine tra loro sarebbe largo 20px. Ho visto "grondaie" usato spesso in vari framework di layout di griglia, quindi non credo che sia fuori limite nel contesto dei siti Web. Mi chiedo solo se questo è il termine corretto per lo spazio tra elementi sovrapposti verticalmente.
JDB ricorda ancora Monica il

1
@JDB: Abbastanza giusto ... Immagino che l'accettazione di "grondaia" in quanto lo spazio tra gli elementi dipenderebbe dal tuo pubblico. A proposito, nei margini HTML / CSS a volte collassano insieme, quindi due elementi con margine 10px non necessariamente avrebbero una grondaia 20px. Potrebbero finire con una grondaia di 10px se i margini crollassero. css-tricks.com/almanac/properties/m/margin
cockypup

Inoltre, (non essendo fastidioso, sono solo molto entusiasta di questo tema) in "margine" CSS non è un termine generale. Ha una definizione molto specifica. w3.org/TR/CSS2/box.html
cockypup,

1
Buon punto. Sono d'accordo che sarebbe meglio avere un termine che si riferisca a "lo spazio reale che è finalmente lasciato tra gli elementi".
cockypup,

1
Anche se elencano tutti i modi in cui i margini non collasseranno, "il collasso dei margini sembra essere l'eccezione piuttosto che la regola nella documentazione. Almeno, la documentazione si legge come libri di grammatica inglese: nessuna regola e tutte le eccezioni. Forse, almeno per la tua squadra, definisci un termine (come "vicolo") che è il margine verticale tra gli elementi dopo il (non) collasso.
Yorik,

4

In termini di composizione, Lumaca è un termine comune per un divario orizzontale. - Spazio dopo / prima di un paragrafo, uno spazio orizzontale tra le sezioni, o tra le regole, ecc. La lumaca ha una dimensione specificata simile alle dimensioni del tipo e verrebbe posizionata in linea con il tipo di metallo per creare la spaziatura verticale corretta.

basato sulla modifica ....

Cell paddingsembra la scelta più ovvia. Or cell spacing.


Questo termine si applica anche alla spaziatura dopo le sezioni? o solo paragrafi?
Zach Saucier,

1
Si applica a qualsiasi area in cui viene utilizzato uno spazio orizzontale. Ai tempi del tipo a caldo, la lumaca veniva utilizzata per creare uno spazio uniforme in orizzontale tra tutte le aree che venivano composte se si trattava di paragrafi, colonne, regole, ecc.
Scott

Mi piace, ma è molto confuso nel web design poiché c'è una seconda definizione in gioco.
JDB ricorda ancora Monica il

1
Lumaca era un termine usato per qualsiasi spaziatura. Lumache di metallo che sono state incassate in modo che nessun inchiostro si attacchi. Sono stati utilizzati per creare la spaziatura orizzontale e allineare il tipo, nonché tra i tipi per creare la spaziatura dei paragrafi o altre esigenze di spaziatura. Mi rendo conto che non è un termine di cui molti designer oggi sarebbero a conoscenza, a meno che non abbiano lavorato per i giornali, forse. Ciò non significa che non sia accurato. Gli oggetti verticali sono xheight, lead e slugs. In termini rigorosi di web design, tenderei ad usare "margin" però.
Scott,

1
... e rendi conto che la domanda è stata modificata per aggiungere molto di più dopo che ho pubblicato questa risposta. Prima non si parlava veramente di "web".
Scott,

1

Nella progettazione del layout, quelle grondaie orizzontali in una griglia sono chiamate "linee di flusso" o "linee di sospensione"


2
Benvenuto in GD.SE! Spiega meglio la tua risposta. Cosa intendi con "progettazione del layout"?
Mensch,

Per aggiungere ciò che Kurt ha detto, forse puoi anche includere esempi visivi.
WELZ,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.