Minding the gaps: A new way to draw separators in CSS
88 comments
·March 20, 2025silvestrov
adregan
I often set gaps between elements to 1rem or more. Coloring the gap wouldn’t be the same as adding a rule.
My “theory of layout” is that no element should have any styling that relates to its relationship with other elements. Gap is very useful for establishing spacing.
thomasfedb
Perhaps with margin: auto your :gap element can sit in the middle of the “gap space”?
Permik
Knowing how CSS tries to support direction agnostic layouts the pseudo elements would be:
:gap ( -[inline\block] ( -[start/end] ) )
You know how the shorthands work elsewhere, so this just replicates that.
rhet0rica
Isn't it (technically, officially) two colons for a pseudo-element? ::gap instead of :gap.
interstice
Came here to say this too, the flexibility of having something like :after would mean not having to consider all the potential ways people are going to want to use this.
Not sure about content: though, that could get weird.
andrewingram
Came here to make the exact same comment, just being able to specify a border feels a little shortsighted.
pacifika
Design by committee is not the best but if you need one more view to be convinced, as a non native English speakers the property names proposed are not communicating the meaning very well. Eg Defining the gap but drawing the separator.
bung
Was just wondering that myself.. why they went with "rule" in `column-rule` and now `row-rule`
Telemakhos
It’s the correct term from the technical vocabulary of book layout and printing. A rule is a line separating things on a page, while a border is a box.[0]. While the term originates in book printing shops, native English speakers would recognize it most easily from the terms “standard ruled” and “college ruled” as applied to loose-leaf notebook paper, describing the faint blue, printed horizontal lines providing guidance for straight handwriting.[1]
[0] https://practicaltypography.com/rules-and-borders.html [1] https://en.m.wikipedia.org/wiki/Ruled_paper
moomin
I remember this argument from the 90s where large numbers of people were upset at having to learn the world "Font". What it came down to was, either you use the correct existing term, or you create a new term and end up with constant conflict between the two.
These days everyone knows what a font is.
zarzavat
While that may be true, I’ll say that as a native English speaker that reading is not the most obvious reading of “row rule”, which to me would be “A determinate method prescribed for performing any operation and producing a certain result.”
Indeed a “CSS rule” is already a thing and it has nothing to do with lines.
layer8
While that is right, “divider” or “divider line” are common as well, and easier to search for. Try a search for “rule page layout” or “rule typography” or “rule css”.
Admittedly, we already have <hr> and <table rules="…">.
krispyfi
> From Middle English reule, rewle, rule, borrowed from Old French riule, reule, from Latin regula (“straight stick, bar, ruler, pattern”), from regō (“to keep straight, direct, govern, rule”), ultimately from Proto-Indo-European h₃réǵeti (“to straighten; right”), from the root h₃reǵ-; see regent. Doublet of rail, regal, regula and rigol.
pacifika
Thanks that's helpful to know they picked a valid term, but if I'd hold a no-context poll (unless I mention ruler) a significant number of people wouldn't know this.
Joker_vD
Couldn't they have at least used the word "ruler" then?
karlshea
It should be familiar from the <hr> tag (horizontal rule).
bfgeek
Part of the design constraint here is to reuse the existing properties that exist for multi-column layout which have existed for a long time - https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule
This proposal extends this mechanism to be more general.
janpot
I wish they took the use-case of resizable panels into account. Even if the implementation is fully user-land, a styleable separator that can also receive events would be so useful.
IshKebab
It's absolutely crazy that the only way to get a native splitter in HTML is to use iframes.
cosmic_cheese
Front end web isn’t my specialty, but I really don’t know why framesets were deprecated. Having resizable panes as a primitive is crazy useful and applicable to several use cases (documentation with a nested tree sidebar comes to mind, for example).
Yeah they were ugly and looked like they came straight out of the Netscape 2.0 era (because they did) but that’s nothing CSS couldn’t have fixed.
autoexec
Frames and tables were awesome, useful, and simple to learn. While they had their problems, really they just became unfashionable and the result has been a million efforts to replicate what we already had.
1shooner
I can't cite any sources, but I want to say it was a combination of security, state management, and responsive layout that were all a huge headache.
recursive
I don't think that's true. The `resize` rule in CSS can do this.
nsonha
what is "native splitter" why do I even want it?
IshKebab
A splitter is the widget that shows two (or more) panes with a divider that you can drag. Commonly used for side bar navigation, see this example: https://codepen.io/Zodiase/pen/qmjyKL
A native splitter is one that is drawn by the browser itself, or even the OS. The only way to get that on the web is with iframes. Otherwise you have to resort to Javascript and manually handling mouse move events as in the example above.
Why do you want that? Same reasons we have `<input>` instead of having every website reimplement text boxes, sliders, checkboxes, etc. with canvas and mouse events.
Sorry I couldn't find an example of an actual iframes website because obviously nobody uses iframes any more.
blooalien
It places related content or features of a program alongside or above one another in the same program window so you get all of what you need all right there on the one window. The separate spaces are often resizable, too, so you can fit the content that's important to you however you as the end-user want it. Thus why as another commenter here (izzieto) notes, it's used in almost any application you can think of.
izietto
Open any application and you'll see native splitters and their related use cases
donatj
> Adding a border changes the size of the items, which might not be desirable
This issue has been addressed for well over a decade.
Is the first line of everyone's css files not just:
* { box-sizing: border-box; }
do_not_redeem
That does not solve the problem in the article. Consider this layout:
<content1> <content2> <content3>
If you start out with equally spaced columns, and then you add borders to content2 and content3 to end up with this visually:
<content1> <border> <content2> <border> <content3>
The DOM actually looks like this:
<content1> <border content2> <border content3>
Now content2 and content3 are smaller than content1, because the borders are part of their width. Borders are the wrong tool for this job no matter the value of box-sizing.
yojo
You just add padding to the items with borders so they visually consume the same space, then increase the width of everything except :first-child to account for the new padding/border. Easy!
That’s sarcasm, obviously. But man, I’ve spent so many hours over the years hacking little lines between HTML boxes.
yojo
Oh, and don’t forget to update the styles or class name via JavaScript if you want to support drag and drop without it looking incredibly janky.
ahartmetz
Ha, that is interesting. I do UI work mostly in QML these days, and almost all of these issues are something I've dealt with. A couple of months ago, I used the gap between items with background showing through to implement grid lines in a calendar view. It lets the "spacing" property of the layout (and the GPU, more overdraw...) do the work.
Pikamander2
It's a decent idea, but it feels like it would have been more useful a decade ago.
With modern CSS you can typically handle separators with a single selector and property like:
.things .thing:not(:last-child)
{
border-bottom: 1px solid gray;
}
poncho_romero
As they say in the article, your solution doesn’t work for even moderately complex layouts. If you want to add a space between elements, margin works wonderfully until those elements can wrap. Gap was introduced because regardless of what happens, there will always be a space between elements. Your solution fails to address the situation gap was introduced to fill.
somishere
Also doesn't really work when e.g. flex items are set to wrap
madeofpalk
Does this work in a grid?
micromacrofoot
they aren't really edge cases, once you do this you add 1px to the layout unevenly - I run into this frustration with grid all the time
larusso
Reminds me of a German designer proverb: „fällt dem Gestalter nichts mehr ein baut er ein paar Linien ein“. As in: when the designer has no idea how to clearly separate content he starts adding lines.
vladde
this has been a pain point for a long, long time. it's cool to see someone doing something
this is just `display: grid` though, and not for non-fixed width elements – the hacker news nav bar is an example where the | between links—on small screens—will either appear at the end of the first line, or at the start of the second line
genuine_smiles
> this is just `display: grid` though
It’s also for flexbox
> and not for non-fixed width elements
What’s this mean? The biggest thing grid can’t do is wrapping; is that what you mean?
micromacrofoot
grid can wrap if you auto size columns
hirako2000
Edge is still a thing apparently.
yurishimo
Edge actually has some super smart engineers working on it. I'm still not going to use it, but Microsoft is committing resources to advancing web standards and performance in a meaningful way. They contribute upstream and advocate very openly for web performance.
shireboy
Yeah, I often have this problem and want some better way than a <hr/> (which doesn’t work in table rows or multi column)
jofzar
God I hope this goes through... Using AI to fix my aweful knowledge of flexbox was a blessing but this feels like the actual solution.
mmastrac
No mention of outline?
I would create new pseudo elements:
This will allow for more fancy backgrounds (e.g. dotted or gradients) and using { padding: 2px } to set whitespace at ends of the seperator.Possible with a :gap-horz and :gap-vert (or whatever css like to name it) to get seperate vertical and horizontal gaps.
Also: .container:gap:nth-gap(2n) { color: blue; } to get alternating colors.