: Is there a specific term for horizontal gutters? Context My team is working on a responsive website and we allow the user to configure some of the properties of the page, including the spaces
Context
My team is working on a responsive website and we allow the user to configure some of the properties of the page, including the spaces between the grid "cells". We had a conversation about the correct terminology to identify the "space between cells". Obviously we could use something like "margin", but that's a bit too broad as that would include the space between the page and the outermost cells. We want to identify the space between cells only. Our users are not necessarily tech-savvy (meaning CSS, etc), but may have some background in graphic design (or at least be familiar with common terminology).
The Question
"Gutter" seems like the most correct term, but most of the definitions for "gutter" that I can find specifically refer to the space between columns.
Is there a specific term for the space between rows? Or is it appropriate to simply refer to them as "horizontal gutters"?
Example
Here's an illustration of what I'm trying to identify.
(Image borrowed from www.init.de/en/news/responsive-design)
Issues with My Current Terminology
"Horizontal(/Vertical) Gutter" is a bit confusing, in my opinion, as it's unclear whether the gutter is between horizontal(/vertical) elements or if it provides horizontal(/vertical) space between vertical(/horizontal) elements. There's some disagreement on my team about which definition is accurate, so I think that's evidence enough that the phrase is actually confusing.
At least in relation to the web, "padding" and "margin" aren't appropriate for what I'm describing. Padding refers to the space between the border and the content, while margin refers to the space around an element. Two adjacent elements with a margin of 10px each would have a 20px gutter between them. (Yes, I'm aware that CSS margins often collapse, but not always.)
I've seen the term "gutter" used often in responsive grid frameworks, so I know it's an acceptable term in web development. I'm just wondering if there is a more appropriate term for a "horizontal gutter".
More posts by @Jessie844
3 Comments
Sorted by latest first Latest Oldest Best
Short answer
I would use "row spacing".
Long answer
As JDB mentioned, I too would rather use web-related terms as opposed to trying to import typesetting terms from the (fascinating) printed media world.
I would use the terms "column spacing" and "row spacing" because most grid layouts use the terms "column" and "grid". I would avoid using the terms "margin" and "padding" to avoid clashes with CSS keywords.
In the scope of web design, which seems to be the scope of the OP's question, I would rather use web-related terms as opposed to trying to import typesetting terms from the (fascinating) printed media world.
I would call this "vertical margin" as in the CSS margin property. The margin is the spacing between the border of adjacent elements (as opposed to the padding, which is the spacing inside the element, between its border and its content.)
In W3C's words:
The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
source
Please notice that the border of the element can be transparent. It does not need to be visible.
Developers are bound to understand this term quite clearly. And, in my opinion, albeit "margin" is less charming than "gutter", "aisle" or "slug", clients are bound to find it a friendlier term.
Digression
Cellpadding and cellspacing are similar to padding and margin, but they are too specific. They are valid html attributes of the <table> and <td> tags as opposed to general CSS attributes. They cannot be applied to any other tag but those. If you are talking only about tables (as in constructs made using the <table> tag) then you would be correct if you call that area cellspacing. If you are talking about rectangular areas in general (as in areas defined by <div>, <span>, <img> or any other tag), then margin would be more accurate.
Just as a side comment, please notice that the cellpading and cellspacing attributes are highly frown upon modern web designers and developers because this type of attribute mixes up structure (HTML) with style (CSS) resulting in pages that are harder to maintain and/or develop by teams. Developers are encouraged to refrain from using these attributes and use the CSS attributes padding and margin instead.
Same thing applies to using tables to create general layouts, as it used to be. Purists claim that tables should be used only to display tabular data. <div> and <span> tags should be used for scaffolding. All this hoping that one day we will have semantically correct webpages were the tags mark up the context semantically as opposed to be backstage rigging only.
In typesetting terms, Slug is a common term for a horizontal gap. - Space after/before a paragraph, a horizontal gap between sections, or between rules, etc. The slug has a specified size similar to type sizes and would be placed inline with the metal type to create the proper vertical spacing.
based upon the edit....
Cell padding seems the most obvious choice. Or cell spacing.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.