What is a "Gutter"?

When I hear the term “Gutter”, I think of the space between copy and the center binding of a book when it is open.

But what does the term mean on the Web?

If I create a “box” and I have 15px Padding on all sides, can i call that the “gutter”? :-/

Debbie

1 Like

A gutter is the clear empty space between an element’s boundaries and the element’s content.

I have never come across the term being used except for the space around the binding in a book.

tbh, I haven’t heard it recently but it was used while I was at school a few years ago and I still see it mentioned on the odd online tutorial.

If you google something like “gutter css”, you’ll get a few hits.

The space between the red and green borders is the “gutter” - well, according to my understanding and memory :slight_smile:

<style type="text/css">
            #content {
                border: 1px solid green;
                margin: 0px auto 0px auto;
                padding: 0px 0px 0px 0px;
                width: 70%;
            }

            #content .gutter {
                margin: 25px 25px 25px 25px;
                border: 1px solid red;
            }
            </style>

        </head>

        <body>

            <div id="content">
            <div class="gutter">    [COLOR=#008000][B]<!-- extra div to set constant gutter on content element -->[/B][/COLOR]
                <h2>Our Company History</h2>
                <p>
                    Welcome. Whether you are planning to attend one of our many conferences or
                    embarking on a private retreat, we're sure that you will enjoy your stay.<br /><br />
                    Located in the northern woods of Wisconsin, the XXXXXX Retreat
                    Center provides comfortable and attractive accommodations while you
                    enjoy the rustic setting available just outside your door. The Retreat
                    Center has 32 beds, large meeting rooms, a chapel, and kitchen facilities.
                    If you want to get out, there are ample opportunities for hiking, canoeing
                    and horseback riding in the surrounding area.
                </p>
                <div id="feature">
                    <h3>A Happy Customer</h3>
                    <p id="reference">
                        I'm writing to tell you how much I enjoyed my retreat at XXXXXXX.
                        I came to your center haggard and worn out from a long illness and
                        job difficulties. I left totally refreshed.<br /><br />
                        I've enthusiastically told all of my friends about the wonderful
                        place you have. Some of us are hoping to organize a group retreat.
                        Rest assured that you'll see me again. Going to Dunston will become
                        a yearly event for me.<br />
                        - P. Citizen
                    </p>
                </div>
            </div>        <!-- end of gutter div -->
        </div>    <!-- end of content div -->

    </body>

In grid design, “gutter” is basically the width of the space between columns. I believe also between rows.

A gutter margin is the white space formed by the adjoining inside margins of two facing pages in a book, or the space between columns on a page.