11

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 https://www.init.de/en/news/responsive-design)

enter image description here

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".

  • Good question, I don't know of a term for it. However, the term gutter is often misused. The spacing between columns is properly called an alley. See this image for clarification – Zach Saucier Apr 27 '15 at 17:45
  • You specifically don't mean leading here, do you? What about paragraph spacing? – e100 Apr 27 '15 at 17:52
  • Context is everything. As this sounds like a table, I'd suggest borrowing whatever terminology MS Excel uses when choosing formatting options for spreadsheet cells (I think it's 'padding' IIRC) – DA01 Apr 28 '15 at 1:39
  • As for paragraph spacing if we're talking truly about the horizontal space between paragraphs in a column I believe the term graphic designers use is 'paragraph spacing'. – DA01 Apr 28 '15 at 1:40
  • Cell spacing is not correct, as that adds space around the outside of the table/grid – JDB Apr 28 '15 at 11:37
2
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.

6

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.)

enter image description here

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.

  • 2
    "Margin" is a general term referring to the space around elements, whereas "gutter" specifically refers to the space between elements. For example, if two contiguous elements each have a margin of 10px, then the gutter between them would be 20px wide. I've seen "gutter" used often in various grid layout frameworks, so I don't think it's out of bounds in the context of websites. I'm just wondering if that's the correct term for the space between vertically stacked elements. – JDB Apr 28 '15 at 17:44
  • 1
    @JDB: Fair enough... I guess the acceptance of "gutter" as the space between elements would depend on your audience. BTW, in HTML/CSS margins sometimes collapse together so two elements with 10px margin not necessarily would have a 20px gutter. They might end up with a 10px gutter if the margins collapse. css-tricks.com/almanac/properties/m/margin – cockypup Apr 28 '15 at 17:54
  • Also, (not being annoying, I am just very enthusiastic about this theme) in CSS "margin" is not a general term. It has a very specific definition. w3.org/TR/CSS2/box.html – cockypup Apr 28 '15 at 17:56
  • 1
    Good point. I agree it would be better to have a term that refers to "the actual space that is finally left between the elements". – cockypup Apr 28 '15 at 17:59
  • 1
    Even though they list all of the ways margins will not collapse," margin collapse seems to be the exception rather than the rule in the documentation. At least, the documentation reads like English grammar books: no rule and all exceptions. Perhaps, at least for your team, you define a term (like "alley") which is the vertical margin between elements after (non-)collapse. – Yorik Apr 28 '15 at 20:16
4

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.

  • Does this term apply to spacing after sections as well? or just paragraphs? – Zach Saucier Apr 27 '15 at 17:46
  • 1
    It applies to any area where a horizontal space is used. In the days of hot type, the slug was used to create an even space horizontally between any areas being typeset whether those were paragraphs, columns, rules, etc.. – Scott Apr 27 '15 at 17:48
  • I like it, but it's very confusing in web design since there's a second definition at play. – JDB Apr 27 '15 at 18:03
  • 1
    Slug was a term used for any spacing. Slugs of metal which were recessed so no ink would stick. They were used to create horizontal spacing and align type, as well as between type to create paragraph spacing or other spacing needs. I realize it's not a term many designers today would be aware of, unless they've worked for newspapers perhaps. That doesn't really mean it's not accurate. Vertical items are xheight, leading, and slugs. In strict terms of web design, I'd tend to use "margin" though. – Scott Apr 28 '15 at 1:48
  • 1
    ... and realize the question was edited to add much more after I posted this answer. There was no real mention of "web" previously. – Scott Apr 28 '15 at 2:19
-1

In layout design those horizontal gutters in a grid are called “flow lines” or “hang lines”

  • 2
    Welcome to GD.SE! Please explain your answer better. What do you mean with "layout design"? – Mensch Nov 5 '18 at 4:25
  • To add to what Kurt said, maybe you can include visual examples as well. – WELZ Nov 5 '18 at 13:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.