Themes: Vertical-stack-card of dashboard behaving differently than the rest

My Home Assistant version: 2022.11.2

My lovelace configuration method (GUI or yaml): GUI

What I am doing: I am trying to modify the margin of the cards on my dashboards via Themes so the cards have a small space in between and I can use nice box-shadows.

UPDATE: This problem is observed when vertical-stack cards are present.

Problem is, that

      card-mod-card-yaml: |
        .: |
          ha-card {
            margin-top: 50px;
            margin-left: 10px;
            margin-bottom: 50px;
            margin-right: 10px;
          }

applies to the vertical-stack of a dashboad differently than to the rest.

If I define margin-bottom and top, the vertical-stack cards on a dashboard have larger margins than all the others.

What I expected to happen: The distance between the cards would be identical.

What happened instead:

Minimal steps to reproduce: Add to your theme

      card-mod-card-yaml: |
        .: |
          ha-card {
            margin-top: 50px;
            margin-left: 10px;
            margin-bottom: 50px;
            margin-right: 10px;
          }

Error messages from the browser console:

---

By putting an X in the boxes ([]) below, I indicate that I:

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• Have made sure I am using the latest version of the plugin.

• Have followed the troubleshooting steps of the “Common Problems” section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[ildar170975]

Do not confirm.

cm_test_2_theme:

  card-mod-theme: cm_test_2_theme

  # card-mod-card-yaml: |
  #   .: |
  #     ha-card {
  #       color: red;
  #     }

  card-mod-card-yaml: |
    .: |
      ha-card {
        margin-top: 50px;
        margin-left: 10px;
        margin-bottom: 50px;
        margin-right: 10px;
      }

[AleXSR700]

Ah, no, I meant that the masonry-view-card-margin also is applied to the cards inside vertical stack.

So to counteract that I would need to modify the code of the vertical stack using card-mod.

As you can see, the two upper cards have a margin applied due to the masonry-view-card-margin. I need to remove it “locally” in the vertical-stack-card’s cards.