Existe um termo específico para calhas horizontais?


12

Contexto
Minha equipe está trabalhando em um site responsivo e permitimos que o usuário configure algumas das propriedades da página, incluindo os espaços entre as "células" da grade. Tivemos uma conversa sobre a terminologia correta para identificar o "espaço entre as células". Obviamente, poderíamos usar algo como "margem", mas isso é um pouco amplo demais, pois incluiria o espaço entre a página e as células mais externas. Queremos identificar o espaço entre as células apenas. Nossos usuários não são necessariamente entendidos em tecnologia (CSS, etc), mas podem ter alguma experiência em design gráfico (ou pelo menos estar familiarizados com a terminologia comum).

A pergunta
"sarjeta" parece ser o termo mais correto, mas a maioria das definições de sarjeta que posso encontrar se referem especificamente ao espaço entre as colunas .

Existe um termo específico para o espaço entre linhas ? Ou é apropriado simplesmente se referir a eles como "calhas horizontais"?

Exemplo
Aqui está uma ilustração do que estou tentando identificar.
(Imagem emprestada de https://www.init.de/en/news/responsive-design )

insira a descrição da imagem aqui

Problemas com a minha terminologia atual
"Calha horizontal (/ vertical)" é um pouco confuso, na minha opinião, pois não está claro se a calha está entre elementos horizontais (/ verticais) ou se fornece espaço horizontal (/ vertical) entre vertical (/ horizontais). Há alguma discordância em minha equipe sobre qual definição é precisa, então acho que há evidências suficientes para que a frase seja realmente confusa.

Pelo menos em relação à web, "preenchimento" e "margem" não são apropriados para o que estou descrevendo. Preenchimento refere-se ao espaço entre a borda e o conteúdo, enquanto margem refere-se ao espaço ao redor de um elemento. Dois elementos adjacentes com uma margem de 10 px cada teriam uma calha de 20 px entre eles. (Sim, estou ciente de que as margens CSS geralmente diminuem, mas nem sempre .)

Eu já vi o termo "sarjeta" usado frequentemente em estruturas de grade responsivas, por isso sei que é um termo aceitável no desenvolvimento da web. Só estou me perguntando se existe um termo mais apropriado para uma "calha horizontal".


Boa pergunta, não conheço um termo para isso. No entanto, o termo calha é frequentemente mal utilizado. O espaçamento entre as colunas é chamado de beco . Veja esta imagem para esclarecimentos
Zach Saucier

Você especificamente não quer dizer liderar aqui, não é? E o espaçamento entre parágrafos?
e100

Contexto é tudo. Como isso soa como uma mesa, eu sugiro o empréstimo seja qual for a terminologia usos MS Excel na escolha de opções de formatação de células da planilha (eu acho que é 'padding' IIRC)
DA01

Quanto ao espaçamento entre parágrafos, se estivermos falando verdadeiramente sobre o espaço horizontal entre parágrafos em uma coluna, acredito que o termo que os designers gráficos usam é 'espaçamento entre parágrafos'.
DA01

Espaçamento de célula não é correto, como que adiciona espaço ao redor do exterior da tabela / grade
JDB ainda se lembra Monica

Respostas:


3
Resposta curta

Eu usaria "espaçamento entre linhas".

Resposta longa

Como o JDB mencionou, eu também preferiria usar termos relacionados à Web, em vez de tentar importar termos tipográficos do (fascinante) mundo da mídia impressa.

Eu usaria os termos "espaçamento entre colunas" e "espaçamento entre linhas" porque a maioria dos layouts de grade usa os termos "coluna" e "grade". Eu evitaria usar os termos "margem" e "preenchimento" para evitar conflitos com palavras-chave CSS.


1
A nova especificação CSS Grid define grid-row-gapegrid-column-gap , mas eu realmente gosto de "espaçamento" um pouco melhor.
JDB ainda se lembra de Monica

7

No escopo do design da Web, que parece ser o escopo da pergunta do OP, prefiro usar termos relacionados à Web, em vez de tentar importar termos tipográficos do mundo (fascinante) da mídia impressa.

Eu chamaria isso de "margem vertical" como na propriedade de margem CSS. A margem é o espaçamento entre a borda dos elementos adjacentes (em oposição ao preenchimento, que é o espaçamento dentro do elemento, entre a borda e o conteúdo).

insira a descrição da imagem aqui

Nas palavras do W3C:

A margem limpa uma área ao redor de um elemento (fora da borda). A margem não tem uma cor de fundo e é completamente transparente. fonte

Observe que a borda do elemento pode ser transparente. Não precisa ser visível.

Os desenvolvedores devem entender esse termo claramente. E, na minha opinião, embora "margem" seja menos charmoso que "sarjeta", "corredor" ou "lesma", os clientes provavelmente encontrarão um termo mais amigável.

Digressão

Cellpaddinge cellspacingsão semelhantes paddinge margin, mas eles são muito específicos. Eles são atributos html válidos das tags <table>e, <td>em oposição aos atributos gerais do CSS. Eles não podem ser aplicados a nenhuma outra tag além dessas. Se você está falando apenas sobre tabelas (como em construções feitas usando a <table>tag), estaria correto se chamar essa área cellspacing. Se você está falando de áreas retangulares em geral (como em áreas definidas por <div>, <span>, <img>ou qualquer outra tag), então marginseria mais preciso.

Como um comentário secundário, observe que os atributos cellpadinge cellspacingsão altamente criticados por designers e desenvolvedores web modernos, porque esse tipo de atributo mistura estrutura (HTML) com estilo (CSS), resultando em páginas mais difíceis de manter e / ou desenvolver por equipes. Os desenvolvedores são incentivados a abster-se de usar esses atributos paddinge, em marginvez disso, usar os atributos CSS .

O mesmo se aplica ao uso de tabelas para criar layouts gerais, como costumava ser. Os puristas afirmam que as tabelas devem ser usadas apenas para exibir dados tabulares. <div>e <span>tags devem ser usadas para andaimes. Tudo isso na esperança de que um dia teremos páginas da web semanticamente corretas, se as tags marcarem o contexto semanticamente, em vez de serem apenas equipamentos nos bastidores.


2
"Margem" é um termo geral que se refere ao espaço ao redor dos elementos, enquanto "calha" se refere especificamente ao espaço entre os elementos. Por exemplo, se dois elementos contíguos cada um tiver uma margem de 10 px, a calha entre eles terá 20 px de largura. Eu já vi "sarjeta" usada frequentemente em várias estruturas de layout de grade, então não acho que esteja fora dos limites no contexto de sites. Só estou me perguntando se esse é o termo correto para o espaço entre os elementos empilhados verticalmente.
JDB ainda se lembra de Monica

1
@JDB: É justo ... Acho que a aceitação de "sarjeta" como o espaço entre os elementos dependeria do seu público. BTW, em margens HTML / CSS, às vezes, se juntam para que dois elementos com margem de 10px não necessariamente tenham uma calha de 20px. Eles podem acabar com uma calha de 10 px se as margens colapsarem. css-tricks.com/almanac/properties/m/margin
cockypup

Além disso, (não sendo irritante, estou muito entusiasmado com esse tema) no CSS "margin" não é um termo geral. Tem uma definição muito específica. w3.org/TR/CSS2/box.html
cockypup

1
Bom ponto. Concordo que seria melhor ter um termo que se refere ao "espaço real que finalmente é deixado entre os elementos".
cockypup

1
Embora eles listem todas as maneiras pelas quais as margens não entrarão em colapso ", o colapso da margem parece ser a exceção e não a regra na documentação. Pelo menos, a documentação é parecida com livros de gramática inglesa: nenhuma regra e todas as exceções. Talvez, pelo menos para sua equipe, você define um prazo (como "beco"), que é a margem vertical entre elementos depois (não) colapso.
Yorik

4

Em termos tipográficos, Slug é um termo comum para uma lacuna horizontal. - Espaço após / antes de um parágrafo, um espaço horizontal entre seções ou entre regras, etc. A lesma tem um tamanho especificado semelhante ao tamanho do tipo e seria colocada alinhada com o tipo de metal para criar o espaçamento vertical adequado.

com base na edição ....

Cell paddingparece a escolha mais óbvia. Or cell spacing.


Este termo também se aplica ao espaçamento após as seções? ou apenas parágrafos?
Zach Saucier

1
Aplica-se a qualquer área em que um espaço horizontal é usado. Nos dias de tipo quente, a lesma foi usado para criar um espaço mesmo horizontalmente entre quaisquer áreas sendo tipografia se aqueles que foram parágrafos, colunas, regras, etc ..
Scott

Gosto, mas é muito confuso em web design, pois existe uma segunda definição em jogo.
JDB ainda se lembra de Monica

1
Lesma era um termo usado para qualquer espaçamento. Pedaços de metal recuados para que a tinta não grude. Eles foram usados ​​para criar espaçamento horizontal e tipo de alinhamento, bem como entre tipos para criar espaçamento entre parágrafos ou outras necessidades de espaçamento. Sei que não é um termo que muitos designers de hoje estariam cientes, a menos que tenham trabalhado para jornais talvez. Isso realmente não significa que não seja preciso. Os itens verticais são xheight, lead e slugs. Em termos estritos de web design, eu tenderia a usar "margem".
Scott

1
... e perceba que a pergunta foi editada para adicionar muito mais depois que eu postei esta resposta. Não havia menção real de "web" anteriormente.
Scott

1

No design do layout, essas calhas horizontais em uma grade são chamadas de "linhas de fluxo" ou "linhas suspensas"


2
Bem-vindo ao GD.SE! Por favor, explique sua resposta melhor. O que você quer dizer com "design de layout"?
Mensch

Para adicionar ao que Kurt disse, talvez você também possa incluir exemplos visuais.
WELZ 5/11
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.