# Gap property in css class **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [April 22, 2024, 8:18am UTC](https://forum.inductiveautomation.com/t/gap-property-in-css-class/89188 "2024-04-22T08:18:48Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![mahsasalimi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mahsasalimi/32/68520_2.png) [@mahsasalimi](https://forum.inductiveautomation.com/u/mahsasalimi)\ **Post date:** [April 22, 2024, 8:18am UTC](https://forum.inductiveautomation.com/t/gap-property-in-css-class/89188/1 "2024-04-22T08:18:48Z")
Hi , let's say I have flex container (row) and I use gap:8px property under the container style. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/6/d63f0b9c7fc3815e30c7646c59ee7acedae15124.png) now I want to create a css class and define this gap in the class. I dont seem to be able to find it . under what category is it? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/6/76fd62f4c80028ede46eb59019f252d3d4a15435.png) ---
**Author:** ![Dharani\_T](https://avatars.discourse-cdn.com/v4/letter/d/bc8723/32.png) [@Dharani\_T](https://forum.inductiveautomation.com/u/Dharani_T)\ **Post date:** [April 22, 2024, 12:02pm UTC](https://forum.inductiveautomation.com/t/gap-property-in-css-class/89188/2 "2024-04-22T12:02:46Z")
Have you tried in stylesheet like below? ```python .psc-Menu { gap: 50px; } ``` ---
**Author:** ![mahsasalimi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mahsasalimi/32/68520_2.png) [@mahsasalimi](https://forum.inductiveautomation.com/u/mahsasalimi)\ **Post date:** [April 22, 2024, 12:20pm UTC](https://forum.inductiveautomation.com/t/gap-property-in-css-class/89188/3 "2024-04-22T12:20:39Z")
hi and thanks for your help 🙂 I have tried stylesheet , but my question is how to achieve this if I just want to use the style class . ---
**Author:** ![Dharani\_T](https://avatars.discourse-cdn.com/v4/letter/d/bc8723/32.png) [@Dharani\_T](https://forum.inductiveautomation.com/u/Dharani_T)\ **Post date:** [April 22, 2024, 12:22pm UTC](https://forum.inductiveautomation.com/t/gap-property-in-css-class/89188/4 "2024-04-22T12:22:12Z")
Oh sorry , are you trying to select gap property from styles available?, if so, i havent seen gap property in the styles. ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [April 22, 2024, 12:49pm UTC](https://forum.inductiveautomation.com/t/gap-property-in-css-class/89188/5 "2024-04-22T12:49:12Z")
The `gap` style is not directly ~~supported~~ implemented by Style Classes. You can inject it, but the recommended approach is to use the stylesheet. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [April 22, 2024, 1:05pm UTC](https://forum.inductiveautomation.com/t/gap-property-in-css-class/89188/6 "2024-04-22T13:05:18Z")
To inject it you can add `; gap 8px` (note the first `;`) in any text field in the styleclass. But yeah this is not the correct way. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [April 22, 2024, 3:03pm UTC](https://forum.inductiveautomation.com/t/gap-property-in-css-class/89188/7 "2024-04-22T15:03:45Z")
When we developed the Style Class UI, we had the impossible task of developing custom UI for an what is essentially an extremely complicated language. Beyond considering which properties we would provide UI for from this ever-expanding set of properties (520 properties as of 2020), we had to determine which would need to account for location-specific settings (`border-right`, as opposed to `border`) ![Screenshot 2024-04-22 at 7.50.15 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/2/b252208ca2e9f81e86ebec381c986b5f41c63d13.png) So we chose the most obvious and commonly-used properties. Unfortunately, `gap` didn't make the cut. The "correct" way to manage this property at this time is to make your Style Class just like you would any other, and apply the other settings you want to be a part of it. Save the changes. Copy the Style Class. Paste this content into your favorite text editor. Add your desired `gap` property and value alongside the other values: ```python gap: 8px; ``` Copy the content from your text editor, and paste it back into `Perspective > Styles`. Delete the original Style, and rename the pasted style to have the original name. ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [April 22, 2024, 5:53pm UTC](https://forum.inductiveautomation.com/t/gap-property-in-css-class/89188/8 "2024-04-22T17:53:27Z")
> [@cmallonee](#): > > Copy the content from your text editor, and paste it back into `Perspective > Styles`. Delete the original Style, and rename the pasted style to have the original name. Is there any precedence applied between the Style Classes and the Stylesheet? IIRC, both are compiled into a Style Sheet which is then included with the HTML files and loaded by the client. So if I were to create a Style Class and then create the same class in the style sheet (with the psc- prefix), then which would take precedence? Obviously whichever class definition comes last in the compiled stylesheet assuming that the specificity is equal, but which one is that? Is it component dependent? In theory you should be able to use the stylesheet (assuming your Ignition Version has it available) to add the rule for the `gap` property without all the copy, paste, edit workflow. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [April 22, 2024, 6:21pm UTC](https://forum.inductiveautomation.com/t/gap-property-in-css-class/89188/9 "2024-04-22T18:21:33Z")
All things being equal (specificity-wise): The theme files will be applied, then the stylesheet resource, then Style Classes, then inline styles. In some places we allow for specifying styles based on different states or pieces, and those are applied last. `theme files > stylesheet resource > Style Class > inline` Update: I tried the pasting of a copied Style CLass and we apparently don't allow that. It appears the rule MUST be applied in the stylesheet.css resource, though you can specify it should only be applied to a specific Style Class (the odd `\/` escape sequence is correct): ```css .psc-Menu\/blue-menu-item { gap: 8px; } ``` ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [April 22, 2024, 7:42pm UTC](https://forum.inductiveautomation.com/t/gap-property-in-css-class/89188/10 "2024-04-22T19:42:39Z")
> [@cmallonee](#): > > theme files \> stylesheet resource \> Style Class \> inline Good to know, so anything that is applied in a Style Class will take precedence over the stylesheet, unless some other mechanism is used to override it (e.g. !important). Does inline mean styles added specifically on a property? For instance a specific table column? ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [April 22, 2024, 9:04pm UTC](https://forum.inductiveautomation.com/t/gap-property-in-css-class/89188/11 "2024-04-22T21:04:11Z")
"Inline" means anything applied to a property which is used to modify appearance, most commonly something like `Component.props.style`, but also sometimes values like `Button.props.textStyle`. ---
**Author:** ![Colby\_Desselles](https://avatars.discourse-cdn.com/v4/letter/c/3be4f8/32.png) [@Colby\_Desselles](https://forum.inductiveautomation.com/u/Colby_Desselles)\ **Post date:** [April 22, 2024, 9:39pm UTC](https://forum.inductiveautomation.com/t/gap-property-in-css-class/89188/12 "2024-04-22T21:39:04Z")
> [@cmallonee](#): > > Update: I tried the pasting of a copied Style CLass and we apparently don't allow that. It appears the rule MUST be applied in the stylesheet.css resource, though you can specify it should only be applied to a specific Style Class (the odd `\/` escape sequence is correct): So you can paste any style within a stylesheet it just takes a little bit of formatting for it to pick up, you just have to make sure to wrap the style in }...{style}...{. But with this method any other style within this class will only take effect if it is located in the injected style, for instance if i wanted to change the background color i would have to instead throw it in }...{backgroundColor:red;}...{ for it to work ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/2/526348fa8a7d3475ef312cab734e7f2647d2e1a0.png)