¿Existe un término específico para canalones horizontales?


12

Contexto
Mi equipo está trabajando en un sitio web receptivo y permitimos al usuario configurar algunas de las propiedades de la página, incluidos los espacios entre las "celdas" de la cuadrícula. Tuvimos una conversación sobre la terminología correcta para identificar el "espacio entre celdas". Obviamente podríamos usar algo como "margen", pero eso es un poco demasiado amplio ya que eso incluiría el espacio entre la página y las celdas más externas. Queremos identificar el espacio entre celdas solamente. Nuestros usuarios no son necesariamente expertos en tecnología (es decir, CSS, etc.), pero pueden tener algunos antecedentes en diseño gráfico (o al menos estar familiarizados con la terminología común).

La pregunta
"Canal" parece el término más correcto, pero la mayoría de las definiciones de "canal" que puedo encontrar se refieren específicamente al espacio entre columnas .

¿Hay un término específico para el espacio entre filas ? ¿O es apropiado referirse simplemente a ellos como "canales horizontales"?

Ejemplo
Aquí hay una ilustración de lo que estoy tratando de identificar.
(Imagen tomada de https://www.init.de/en/news/responsive-design )

ingrese la descripción de la imagen aquí

Problemas con mi terminología actual
" Canal horizontal (/ vertical)" es un poco confuso, en mi opinión, ya que no está claro si el canal está entre elementos horizontales (/ verticales) o si proporciona espacio horizontal (/ vertical) entre vertical (/ elementos horizontales). Hay un cierto desacuerdo en mi equipo sobre qué definición es precisa, por lo que creo que es evidencia suficiente de que la frase es realmente confusa.

Al menos en relación con la web, "relleno" y "margen" no son apropiados para lo que estoy describiendo. El relleno se refiere al espacio entre el borde y el contenido, mientras que el margen se refiere al espacio alrededor de un elemento. Dos elementos adyacentes con un margen de 10px cada uno tendrían una canaleta de 20px entre ellos. (Sí, soy consciente de que los márgenes de CSS a menudo colapsan, pero no siempre ).

He visto que el término "canalón" se usa a menudo en marcos de cuadrícula receptivos, así que sé que es un término aceptable en el desarrollo web. Me pregunto si hay un término más apropiado para una "canaleta horizontal".


Buena pregunta, no sé de un término para ello. Sin embargo, el término canalón a menudo se usa incorrectamente. El espacio entre las columnas se llama correctamente un callejón . Ver esta imagen para aclaraciones
Zach Saucier

Específicamente no te refieres a liderar aquí, ¿verdad? ¿Qué pasa con el espacio entre párrafos?
e100

El contexto lo es todo. Como esto parece una tabla, sugeriría tomar prestada cualquier terminología que use MS Excel al elegir las opciones de formato para las celdas de la hoja de cálculo (creo que es 'relleno' IIRC)
DA01

En cuanto al espacio entre párrafos, si realmente estamos hablando del espacio horizontal entre párrafos en una columna, creo que el término que usan los diseñadores gráficos es "espacio entre párrafos".
DA01

El espacio entre celdas no es correcto, ya que eso agrega espacio alrededor del exterior de la tabla / cuadrícula
JDB todavía recuerda a Mónica el

Respuestas:


3
Respuesta corta

Yo usaría "interlineado".

Respuesta larga

Como mencionó JDB, yo también preferiría usar términos relacionados con la web en lugar de tratar de importar términos tipográficos del mundo de los medios impresos (fascinantes).

Usaría los términos "espaciado de columna" y "espaciado de fila" porque la mayoría de los diseños de cuadrícula usan los términos "columna" y "cuadrícula". Evitaría usar los términos "margen" y "relleno" para evitar conflictos con las palabras clave CSS.


1
La nueva especificación CSS Grid define grid-row-gapygrid-column-gap , pero en realidad me gusta "espaciar" un poco mejor.
JDB todavía recuerda a Mónica

7

En el ámbito del diseño web, que parece ser el alcance de la pregunta del OP, preferiría usar términos relacionados con la web en lugar de tratar de importar términos tipográficos del mundo de los medios impresos (fascinantes).

Yo llamaría a esto "margen vertical" como en la propiedad de margen CSS. El margen es el espacio entre el borde de los elementos adyacentes (a diferencia del relleno, que es el espacio dentro del elemento, entre su borde y su contenido).

ingrese la descripción de la imagen aquí

En palabras del W3C:

El margen borra un área alrededor de un elemento (fuera del borde). El margen no tiene un color de fondo y es completamente transparente. fuente

Tenga en cuenta que el borde del elemento puede ser transparente. No necesita ser visible.

Los desarrolladores están obligados a comprender este término con bastante claridad. Y, en mi opinión, aunque "margen" es menos encantador que "canalón", "pasillo" o "babosa", los clientes están obligados a encontrar un término más amigable.

Digresión

Cellpaddingy cellspacingson similares a paddingy margin, pero son demasiado específicos. Son atributos html válidos de las etiquetas <table>y <td>en oposición a los atributos generales de CSS. No se pueden aplicar a ninguna otra etiqueta que no sean aquellas. Si solo está hablando de tablas (como en las construcciones hechas con la <table>etiqueta), estaría en lo correcto si llama a esa área cellspacing. Si usted está hablando de áreas rectangulares en general (como en áreas definidas por <div>, <span>, <img>o cualquier otra etiqueta), entonces marginsería más exacto.

Solo como comentario lateral, tenga en cuenta que los atributos cellpadingy cellspacingestán muy mal vistos por los diseñadores y desarrolladores web modernos porque este tipo de atributo combina la estructura (HTML) con el estilo (CSS), lo que da como resultado páginas que son más difíciles de mantener y / o desarrollar equipos Se alienta a los desarrolladores a abstenerse de usar estos atributos y usar los atributos CSS paddingy en su marginlugar.

Lo mismo se aplica al uso de tablas para crear diseños generales, como solía ser. Los puristas afirman que las tablas deben usarse solo para mostrar datos tabulares. <div>y las <span>etiquetas deben usarse para andamios. Todo esto con la esperanza de que algún día tendremos páginas web semánticamente correctas donde las etiquetas marquen el contexto semánticamente en lugar de ser solo un montaje detrás del escenario.


2
"Margen" es un término general que se refiere al espacio alrededor de los elementos, mientras que "margen" se refiere específicamente al espacio entre elementos. Por ejemplo, si dos elementos contiguos tienen un margen de 10px cada uno, entonces la canaleta entre ellos tendría 20px de ancho. He visto el "canal" a menudo utilizado en varios marcos de diseño de cuadrícula, por lo que no creo que esté fuera de los límites en el contexto de los sitios web. Me pregunto si ese es el término correcto para el espacio entre elementos apilados verticalmente.
JDB todavía recuerda a Mónica el

1
@JDB: Bastante justo ... Supongo que la aceptación de "canalón" ya que el espacio entre los elementos dependerá de su audiencia. Por cierto, en los márgenes HTML / CSS a veces colapsan juntos, por lo que dos elementos con un margen de 10 píxeles no necesariamente tendrían un canal de 20 píxeles. Podrían terminar con una canaleta de 10px si los márgenes colapsan. css-tricks.com/almanac/properties/m/margin
cockypup

Además, (no siendo molesto, estoy muy entusiasmado con este tema) en CSS "margen" no es un término general. Tiene una definición muy específica. w3.org/TR/CSS2/box.html
cockypup

1
Buen punto. Estoy de acuerdo en que sería mejor tener un término que se refiera al "espacio real que finalmente queda entre los elementos".
cockypup

1
A pesar de que enumeran todas las formas en que los márgenes no colapsarán, "el colapso del margen parece ser la excepción más que la regla en la documentación. Al menos, la documentación se lee como libros de gramática en inglés: ninguna regla y todas las excepciones. Quizás, al menos para su equipo, define un término (como "callejón") que es el margen vertical entre elementos después del colapso (no).
Yorik

4

En términos de composición tipográfica, Slug es un término común para un espacio horizontal. - Espacio después / antes de un párrafo, un espacio horizontal entre secciones, o entre reglas, etc. La bala tiene un tamaño específico similar a los tamaños de tipo y se colocaría en línea con el tipo de metal para crear el espacio vertical adecuado.

basado en la edición ...

Cell paddingParece la opción más obvia. O cell spacing.


¿Este término también se aplica al espaciado después de las secciones? o solo párrafos?
Zach Saucier

1
Se aplica a cualquier área donde se use un espacio horizontal. En los días de tipo caliente, se utilizó la babosa para crear un espacio aún horizontalmente entre las áreas que son de composición tipográfica si esos eran los párrafos, columnas, reglas, etc ..
de Scott

Me gusta, pero es muy confuso en el diseño web ya que hay una segunda definición en juego.
JDB todavía recuerda a Mónica el

1
Babosa era un término utilizado para cualquier espacio. Babosas de metal que estaban empotradas para que no se pegara tinta. Se utilizaron para crear espacios horizontales y alinear tipos, así como entre tipos para crear espacios entre párrafos u otras necesidades de espacios. Me doy cuenta de que no es un término que muchos diseñadores hoy conozcan, a menos que hayan trabajado para periódicos tal vez. Eso realmente no significa que no sea exacto. Los elementos verticales son xheight, Leading y slugs. Sin embargo, en términos estrictos de diseño web, solía usar "margen".
Scott

1
... y me doy cuenta de que la pregunta fue editada para agregar mucho más después de publicar esta respuesta. No había una mención real de "web" anteriormente.
Scott

1

En el diseño de diseño, las canaletas horizontales en una cuadrícula se denominan "líneas de flujo" o "líneas colgantes"


2
¡Bienvenido a GD.SE! Por favor explique su respuesta mejor. ¿Qué quieres decir con "diseño de diseño"?
Mensch

Para agregar a lo que dijo Kurt, quizás también pueda incluir ejemplos visuales.
WELZ
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.