# Strange gaps occur when using the \[sp-label\] tag
**URL:** https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061
**Category:** UXP Plugin API
**Tags:** spectrum
**Created:** [March 20, 2023, 4:39am UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061 "2023-03-20T04:39:29Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@hideo](https://forums.creativeclouddeveloper.com/u/hideo)
#### Post date: [March 20, 2023, 4:39am UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/1 "2023-03-20T04:39:29Z")
こんにちは。
PhotoshopのUXPを使用したScriptUIにおいて、
Spectrumのsp-labelを使用すると、良く分からない隙間が発生します。
-プラグインSample-
> **[uxp-photoshop-plugin-samples/ui-kitchen-sink at main ·...](https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/tree/main/ui-kitchen-sink)**
>
> UXP Plugin samples for Photoshop 22 and higher. Contribute to AdobeDocs/uxp-photoshop-plugin-samples development by creating an account on GitHub.
sp-labelを使用すると後ろに変な隙間が出来ます。
文字数が短いと発生しているようですが、
CSSでマージンやパディングの調整を行ってもこの隙間が解決できませんでした。
sp-labelを使用しないと正しい幅で表示されます。
個別に幅の設定をするしかないのでしょうか？
どなたか解決策をご存じありませんか？
* * *
Hello.
In ScriptUI using Photoshop’s UXP.
Spectrum’s sp-label causes a gap that I don’t understand.
-Plugin Sample-
> **[uxp-photoshop-plugin-samples/ui-kitchen-sink at main ·...](https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/tree/main/ui-kitchen-sink)**
>
> UXP Plugin samples for Photoshop 22 and higher. Contribute to AdobeDocs/uxp-photoshop-plugin-samples development by creating an account on GitHub.
When I use sp-label, there is a strange gap behind it.
It seems to occur when the number of characters is short.
I have tried adjusting the margins and padding in CSS, but could not resolve this gap.
Without sp-label, the correct width is displayed.
Is the only way to set the width individually?
Does anyone know of a solution?
[Translated with DeepL](https://www.deepl.com/translator?utm_source=windows&utm_medium=app&utm_campaign=windows-share)
---
### Author:  [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)
#### Post date: [March 20, 2023, 6:33am UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/2 "2023-03-20T06:33:58Z")
You should try inspecting `sp-label` inside the `div.sp-tab.selected` - not the `div` itself
---
### Author:  [@Majji](https://forums.creativeclouddeveloper.com/u/Majji)
#### Post date: [March 20, 2023, 10:24am UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/3 "2023-03-20T10:24:30Z")
@hideo Try removing the min-width set on the sp-label. It has a min-width of 40px.
---
### Author:  [@hideo](https://forums.creativeclouddeveloper.com/u/hideo)
#### Post date: [March 20, 2023, 11:07am UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/4 "2023-03-20T11:07:43Z")
Thanks for the reply.
I also checked inside sp-label.
The size does not change when I set the margins and padding to zero.
It does not change when the parent factor is also included and set to zero.
---
### Author:  [@hideo](https://forums.creativeclouddeveloper.com/u/hideo)
#### Post date: [March 20, 2023, 11:09am UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/5 "2023-03-20T11:09:10Z")
Thanks for the reply.
> min-width of 40px.
Where does this refer to what is specified?
---
### Author:  [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)
#### Post date: [March 20, 2023, 11:18am UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/6 "2023-03-20T11:18:14Z")
So did you check in the right window what styles you have for that `sp-label` (you excluded that from your screenshot)? Is there a specific reason why you think margins or paddings should change the behaviour (even after there was a reply about the width)?
---
### Author:  [@hideo](https://forums.creativeclouddeveloper.com/u/hideo)
#### Post date: [March 20, 2023, 12:24pm UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/7 "2023-03-20T12:24:48Z")
Thanks for the reply.
Sorry, I did not have enough diagrams.
This is how I am checking.
I’m checking by changing the [Nateve] part.
I’ve set all margins, padding, etc. to zero.
I don’t seem to have specified any widths.
Only the gap on the right side remains empty.
---
### Author:  [@shuji](https://forums.creativeclouddeveloper.com/u/shuji)
#### Post date: [March 20, 2023, 12:45pm UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/8 "2023-03-20T12:45:58Z")
sp-label is Web Components.
Web Components has shadow DOM which is separated from outside scope.
according to MDN, Web Component have closed mode or open mode.
but in case of closed mode, accessing from outside is impossible.
and It seems like it has closed mode (because shadowRoot property returns null).
probably I suppose so.
[Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
[ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode)
---
### Author:  [@hideo](https://forums.creativeclouddeveloper.com/u/hideo)
#### Post date: [March 20, 2023, 1:14pm UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/9 "2023-03-20T13:14:15Z")
Thank you for your valuable information.
I have read your Blog before.
My knowledge of the API and DOM is not good enough.
I have not been able to find a solution to this kind of problem.
It takes me a lot of time to investigate.
I did not know that I could check the internal access in the logs like this.
I would like to try it once.
I will leave the UI part for now and make the contents first.
---
### Author:  [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)
#### Post date: [March 20, 2023, 1:14pm UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/10 "2023-03-20T13:14:33Z")
You’re checking the div again and not label
---
### Author:  [@hideo](https://forums.creativeclouddeveloper.com/u/hideo)
#### Post date: [March 20, 2023, 1:25pm UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/11 "2023-03-20T13:25:03Z")
Thanks, I guess my understanding has not caught up.
I will study it again.
---
### Author:  [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)
#### Post date: [March 20, 2023, 1:46pm UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/12 "2023-03-20T13:46:23Z")
Inspect label and not div. In your last screenshot I see you’re inspecting the div, which is highlighted. Label should be highlighted. Then you will see label styles on the right
---
### Author:  [@hideo](https://forums.creativeclouddeveloper.com/u/hideo)
#### Post date: [March 20, 2023, 2:13pm UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/13 "2023-03-20T14:13:17Z")
Thanks again.
I understand what you are saying.
I had checked the contents of my sp-label many times as well.
There is no parlameter that leaves a gap on the right and I can’t figure out why.
Thanks for reading this so many times.
---
### Author:  [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)
#### Post date: [March 20, 2023, 4:15pm UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/14 "2023-03-20T16:15:17Z")
OK, so most likely this Spectrum element has some stuff going inside of it. That’s why I don’t really like them, but they are good with theme support. Spectrum elements are basically wrappers of something more as I understand them. And that _something_ is not exposed to the outside in any way. Also it’s not possible to change these inner styles in any way.
@Majji seems to be on to something, that there’s a 40px width somewhere, but it’s not the label. I didn’t dig deep, but what @shuji explains seems reasonable and confirms my thoughts.
This is just another limitation/bug on Adobes side I suppose 🤷♂️
---
### Author:  [@hideo](https://forums.creativeclouddeveloper.com/u/hideo)
#### Post date: [March 20, 2023, 5:33pm UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/15 "2023-03-20T17:33:52Z")
There still seems to be a lot of bugs and other problems.
I will take a look and make as much as I can.
Thanks again and again for the confirmation.
---
### Author:  [@sttk3](https://forums.creativeclouddeveloper.com/u/sttk3)
#### Post date: [March 21, 2023, 2:32am UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/16 "2023-03-21T02:32:05Z")
Spectrum UXPのコンポーネントの見た目は上書きできないことが多いです。
ただ，隣接セレクタを使って無理やりマージンをマイナスにしたり，transformを使って移動するような汚いハックは通用することがあります。
The appearance of Spectrum UXP components often cannot be overridden.
However, dirty hacks like forcing negative margins using adjacent sibling combinator or moving them using transform may work.
---
### Author:  [@Majji](https://forums.creativeclouddeveloper.com/u/Majji)
#### Post date: [March 21, 2023, 5:25am UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/17 "2023-03-21T05:25:48Z")
@hideo Inspection of styles applied on sp-label is not possible. But I can assure you that removing the min-width from the sp-label can resolve the current issue.
`HTML`
---
### Author:  [@hideo](https://forums.creativeclouddeveloper.com/u/hideo)
#### Post date: [March 21, 2023, 6:24am UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/18 "2023-03-21T06:24:44Z")
ありがとうございます。
制限のある中でUIを詰めたいので細かいところがもう少し分かりやすいと良いのですが…。
@Majji さんの教えてくれた方法で対応できました。
Thank you.
I would like to fill in the UI with the restrictions, so it would be nice if the details were a little clearer…
I was able to handle it with the method @Majji showed me.
---
### Author:  [@hideo](https://forums.creativeclouddeveloper.com/u/hideo)
#### Post date: [March 21, 2023, 6:28am UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/19 "2023-03-21T06:28:27Z")
Thank you very much!!
I was able to do it the way you taught me.
---
### Author:  [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)
#### Post date: [March 21, 2023, 7:45am UTC](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061/20 "2023-03-21T07:45:14Z")
I tried with `min-width: 0` and `auto`, but it didn’t work 🤨 Wonder why 🤔
[Next page](https://forums.creativeclouddeveloper.com/t/strange-gaps-occur-when-using-the-sp-label-tag/6061.md?page=2)