13

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

5
  • 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 Apr 27, 2015 at 17:45
  • You specifically don't mean leading here, do you? What about paragraph spacing?
    – e100
    Apr 27, 2015 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, 2015 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, 2015 at 1:40
  • Cell spacing is not correct, as that adds space around the outside of the table/grid
    – JDB
    Apr 28, 2015 at 11:37

5 Answers 5

7

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.

9
  • 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, 2015 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, 2015 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, 2015 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, 2015 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, 2015 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.

8
  • Does this term apply to spacing after sections as well? or just paragraphs? Apr 27, 2015 at 17:46
  • I like it, but it's very confusing in web design since there's a second definition at play.
    – JDB
    Apr 27, 2015 at 18:03
  • Context is always key :) In addition to who you are speaking to.
    – Scott
    Apr 27, 2015 at 18:04
  • Sorry @Scott, wasn't aware what pieces of context would be most relevant for the question.
    – JDB
    Apr 27, 2015 at 20:38
  • 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, 2015 at 2:19
3
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.

1
2

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

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

I have been teaching typography for 40+ years and I have your complete answer. The person who suggested flow lines is correct. To my knowledge, this term is post modern, not from classic typography. The first defined graphic modular grids were derived from observing Le Corbusier's architectural drawings. (By two unnamed Swiss graphic designers.)(Apparently)

In print typography when creating a modular grid, the modules are based on the vertical and horizontal typographic measurements of the typeface chosen. The vertical column is determined by numbers of text lines deep. The width of the modules is determined by the number of characters wide in each module.If I choose 12 point Helvetica regular on and 18 point line space or 12/18 pts, all horizontal lines will be a measure of 18 points. If you leave a space between paragraphs, most designers will leave one line space between paragraphs if they aren't indenting the first line of each paragraph.

That blank space is called line space or 18 point line spaces.

When creating a modular grid, one made up of defined equal blocks... say 3 column modules wide by 6 modules deep or 18 modules in total. Each module might represent 6 lines of text. The vertical spaces between the columns are called gutters, and the 5 horizontal lines separating the 6 modules are called flow lines, flow, horizon lines, horizons or 5 full line spaces. These all depend on the typographic language one is taught to use, but they will all mean the same thing.

If a modular grid is not made up of equal modules and the pattern irregular, your random horizontal spaces between modules will still be called flow lines or horizons. This occurs when your type sizes vary. You might be using 12/18 points in several modules and 9/13 points in other modules.

A typographic book that demonstrates modular formations is THE GRID by Alan Hurlburt. Unfortunately the explanations are vague at best, however if one is visually astute and can grasp visual content, you can figure out how the patterns were arrived at.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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