Decreasing of padding of lovelace state-label

Configuration
1

Hi,

I have multiple values from the same sensor displayed on a blueprint but those are pretty close to each other thus when I add background color those are overlapped due to the padding of the label:

image
image748×550 46.4 KB

Is there a way to decrease the default (8px) padding? I’ve tried to add padding: 0px 0px 0px 0px to the style but I realized that padding for an inner div:

[new users: one pic only]

so, applying padding like this:

          - color: white
            entity: sensor.basement_s1_temperature
            font-family: Helvetica
            font-size: 12px
            style:
              left: 35%
              top: 86%
              background-color: blue
              padding: 0px 0px 0px 0px
            text-align: center
            type: state-label

just does not work.

Could anyone help in this matter?

Thanks,

/sza2

2

[new users: only one pic]:

image
image991×260 39 KB

3

Really old topic, but Google sent me here when I was looking for something similar. I figured I’d post what worked for me in case anyone else stumbles on this looking for answers.

Adding the card-mod module as a resource opens up a lot of additional flexibility with CSS - both with cards and with individual entities.

Modified padding example:

          - type: picture-elements
            image: /local/outline.png
            elements:
              - type: state-label
                entity: binary_sensor.contact_sensor
                card_mod:
                  style: |
                    :host>div {
                      padding: 2px 4px;
                    }
                style:
                  top: 88%
                  left: 41%
                  ...