# Spaces between number entry boxes inside a container

**URL:** <https://community.glideapps.com/t/spaces-between-number-entry-boxes-inside-a-container/86987>\
**Category:** Ask for Help\
**Created:** [April 30, 2026, 5:26pm UTC](https://community.glideapps.com/t/spaces-between-number-entry-boxes-inside-a-container/86987 "2026-04-30T17:26:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [April 30, 2026, 5:26pm UTC](https://community.glideapps.com/t/spaces-between-number-entry-boxes-inside-a-container/86987/1 "2026-04-30T17:26:00Z")

</div>

How can I reduce the gaps between the elements inside the container, I need to add a couple more number entry boxes but gaps are too big .

 ![Screenshot 2026-04-30 at 19.21.36](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/c/4c3130c8aa7ae01d4287741795d506812af0ebf7.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 4, 2026, 1:54pm UTC](https://community.glideapps.com/t/spaces-between-number-entry-boxes-inside-a-container/86987/2 "2026-05-04T13:54:52Z")

</div>

Instead of adjusting the spacing, you can switch to a more compact input style.  
This floating label + bottom-border approach reduces vertical space significantly.

Here’s an example:

![ScreenRecording2026-05-04203448-ezgif.com-video-to-gif-converter](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/d/5dd3c5938ce77a45293b13824f11f2a3570ccf66.gif)

> **CSS Code**
>
> ```css
> /* Space between input groups */
> [data-testid="wire-container"] {
> margin-bottom: 16px;
> }
> 
> /* Floating label (default: small and above input) */
> [data-testid="wf-title"] {
> position: absolute;
> top: 12px;
> transform: translateY(-1.5rem) scale(0.75);
> transform-origin: left top;
> transition: all 0.2s ease;
> }
> 
> /* Empty input → label acts like placeholder */
> [class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:placeholder-shown)
> [data-testid="wf-title"] {
> transform: translateY(0) scale(1);
> color: #9ca3af;
> }
> 
> /* Focus → label floats + active color */
> [class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:focus)
> [data-testid="wf-title"] {
> transform: translateY(-1.5rem) scale(0.75);
> color: #3b82f6;
> }
> 
> /* Filled input → keep label floating */
> [class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:not(:placeholder-shown))
> [data-testid="wf-title"] {
> transform: translateY(-1.5rem) scale(0.75);
> color: #6b7280;
> }
> 
> /* Input container → bottom border only (number & text entry) */
> [class^="wire-field___StyledLabel2"],
> #main-root [data-testid="wire-container"] textarea {
> border: none;
> border-bottom: 2px solid var(--gv-border-dark);
> border-radius: 0;
> background-color: transparent;
> }
> 
> /* Remove hover border & shadow */
> #main-root [class^="wire-field___StyledLabel2"]:hover,
> #main-root [data-testid="wire-container"] textarea:hover {
> border: none;
> border-bottom: 2px solid var(--gv-border-dark);
> box-shadow: none;
> }
> 
> /* Remove focus ring */
> [class^="wire-field___StyledLabel2"]:focus,
> [class^="wire-field___StyledLabel2"]:focus-visible,
> #main-root [data-testid="wire-container"] textarea:focus,
> #main-root [data-testid="wire-container"] textarea:focus-visible {
> box-shadow: none;
> }
> 
> /* Focus → bottom border highlight */
> #main-root [class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:focus)
> [class^="wire-field___StyledLabel2"], #main-root [data-testid="wire-container"]:has(textarea:focus) textarea {
> border-bottom-color: #3b82f6;
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [May 18, 2026, 1:39pm UTC](https://community.glideapps.com/t/spaces-between-number-entry-boxes-inside-a-container/86987/3 "2026-05-18T13:39:20Z")

</div>

Thanks for you reply - does this code go into a rich text field inside the container ?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 18, 2026, 2:25pm UTC](https://community.glideapps.com/t/spaces-between-number-entry-boxes-inside-a-container/86987/4 "2026-05-18T14:25:07Z")

</div>

No, there are designated places to enter CSS.

> **[Custom CSS | Glide Docs](https://www.glideapps.com/docs/reference/user-experience/css-for-apps)**
>
> Customize the way your app looks with CSS.