[anchor-position] CSS anchor position gap

[zanina-yassine]

After a short Q&A with Tab Atkins-Bittner we discussed the possibility of adding anchor-position-gap to elegantly add space between the anchor and the element attached to it

proposition to the property name
anchor-gap

[astearns]

I expect this should be adding a gap between the element and its anchor(s), the same gap if more than one anchor is being used

[zanina-yassine]

The thought of multiple anchored elements also popped in my head but since this is a concept I would assume the CSSWG would find a more fitting way and possibly take into consideration all possible scenarios when using the anchor-postion

[kbrilla]

Few question:

1. Will it be placed on the anchor element or anchored element?
2. I can imagine that someone will have few anchored elements that want different gaps.
3. Gap should be defined in inline/block axis. Whats more maybe even start/end as well.
4. I suppose it should work for the inset-area

[kbrilla]

5. Maybe anchor() function could be passed gap for more precise placement without worrying about adding or subtracting to create gap between anchor and anchored element.
6. Will anchor-size() include gap or not?
7. Adding to anchor() will allow for different gaps for different anchored elements and anchors (like one element anchored between two elements with different gaps, and second popover just anchored to one element and with yet another gap'

[zanina-yassine]

I would lean towards adding the gap to the element attached to the anchor, that way we can use gaps the same way we use it with grid and flex layout

As for the anchor function anchor() that might be a great idea

[kizu]

I would lean towards adding the gap to the element attached to the anchor, that way we can use gaps the same way we use it with grid and flex layout

If so, is there a reason a margin does not work for this? https://codepen.io/kizu/pen/dyEzjpZ Here the margin is defined only on one side, and when the position-try-options flip the element, the margins are also flipped. And for anchor() we can already use calculations to adjust its value when necessary.

Thinking about it: having the anchor-gap or anchor-margin on the element itself could be more useful, as it will achieve something a property on the attached element can't: define a minimum margin between the anchor and anything that wants to be attached to it.